搜尋 Mozilla 技術支援網站

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

problem with js onmousedown

  • 10 回覆
  • 1 有這個問題
  • 820 次檢視
  • 最近回覆由 jscher2000

more options

On my web pages that display pictures, "next", "previous" and "index" can be selected by buttons. They work as before, but the button images no longer indicate that they are depressed. This worked perfectly well on the version of Firefox distributed by Debian as Iceweasel, but after the recent upgrade to Firefox-esr it does not. It also does not work on Firefox running on Windows 10, which is of course repeatedly updated. I suspect some feature of the configuration has been changed.The javascript lines that have no effect now are (to give one example)

    onmousedown=\"document['nextbu'].src='/U/nextdn.gif';\"

It seems that firefox is ignoring the onmousedown event, but correctly getting the click event. To check an example web page, look at http://molard.ca/C/H/240/4003.html

被選擇的解決方法

ritaopal said

I only have one body.js, easy to edit, but I then have to run the html file generation script multiple times -- that's the chore.

I haven't checked every page, but if they all follow the model of the one I played with: the pages include body.js automatically and you only need to edit the script file. (Plus the .css file if you adopt the alternate approach.) External files are a lifesaver!

I do want to know what changed to make my archaic method stop working.

I don't know when

document['element-id']

stopped working. I would have thought a long time ago.

Firefox logs the following in the web console for that reference:

TypeError: document.nextbu is undefined
從原來的回覆中察看解決方案 👍 1

所有回覆 (10)

more options

Wow, this code dates back to another era... The preferred way to refer to an element by its ID is the following -- this should be compatible with all modern browsers and back to IE6 at least:

<a onclick="nexurl() ;" onmousedown="document.getElementById('nextbu').src='/U/nextdn.gif';" onmouseup="document.getElementById('nextbu').src='/U/nextup.gif';"><img src="/U/nextdn.gif" id="nextbu" class="javabut" alt="nextbutton"> </a>

more options

What do you think about using CSS for the buttons? You can style links to look like buttons. I made a demo for you here:

http://www.jeffersonscher.com/temp/4003.html

(Let me know when I should take it down.)

The computations in head.js do not work with the URL so please ignore that problem for demo purposes.

more options

The code you provide causes the button to appear to be pressed whenever the mouse is moved over it; what is wanted is for the button to appear depressed when the mouse button is pressed, and for the appearance to revert to unpressed when the mouse button is released. That worked before -- the question is why doesn't it work now. It never worked on IE because they do not follow the rules checked by W3C -- the reason why my choice of browser is Firefox.

more options

The response above is to the second message. I shall have to experiment with the first suggestion. Thanks for the assistance.

Whatever the solution, there is a fair bit of work as I must have about 6000 html files; they are all generated by a script, but it will have to be rerun for each directory of 100 pictures.

more options

ritaopal said

Whatever the solution, there is a fair bit of work as I must have about 6000 html files; they are all generated by a script, but it will have to be rerun for each directory of 100 pictures.

Oh no, it's not that bad. For the first edit you only need to update six lines in the body.js file.

document.write("onmousedown=\"document['prevbu'].src='/U/prevdn.gif';\"") ; document.write("onmouseup=\"document['prevbu'].src='/U/prevup.gif';\">") ;

document.write("onmousedown=\"document['nextbu'].src='/U/nextdn.gif';\"") ; document.write("onmouseup=\"document['nextbu'].src='/U/nextup.gif';\">") ;

document.write("onmousedown=\"document['indxbu'].src='/U/indxdn.gif';\"") ; document.write("onmouseup=\"document['indxbu'].src='/U/indxup.gif';\"> ") ;

There probably aren't that many copies of body.js on your site.

more options

ritaopal said

The code you provide causes the button to appear to be pressed whenever the mouse is moved over it; what is wanted is for the button to appear depressed when the mouse button is pressed, and for the appearance to revert to unpressed when the mouse button is released.

Oops, I edited the CSS from changing the appearance on :hover to changing it on :active instead.

more options

Your code now works fine. I am still not sure why mine does not; it works on an ancient laptop running Iceweasel from Debian 7, and does not work on Firefox-esr from Debian 8. To get round the complexity of the script generated code I now have a stand alone webpage

    http://molard.ca/button.html

which exhibits the problem -- my question is why?

I only have one body.js, easy to edit, but I then have to run the html file generation script multiple times -- that's the chore.

more options

Thanks for the fast and helpful responses. I have copies of your html now, so the page can be taken down. The method is very elegant and appears to redefine the gif colour table -- a trick I was unaware of. I should obviously update my js literature.

However, as a computer addict I do want to know what changed to make my archaic method stop working. In the Debian upgrade to Firefox-esr there were warnings about recopying customization, but no suggestion about problems with backward compatibility.

Thanks again.

more options

I must correct my conclusion from a cursory glance; the gif buttons are not used as the button can be constructed on the fly using the border-color property. That simplifies life if I ever need new buttons.

Thanks.

more options

選擇的解決方法

ritaopal said

I only have one body.js, easy to edit, but I then have to run the html file generation script multiple times -- that's the chore.

I haven't checked every page, but if they all follow the model of the one I played with: the pages include body.js automatically and you only need to edit the script file. (Plus the .css file if you adopt the alternate approach.) External files are a lifesaver!

I do want to know what changed to make my archaic method stop working.

I don't know when

document['element-id']

stopped working. I would have thought a long time ago.

Firefox logs the following in the web console for that reference:

TypeError: document.nextbu is undefined