I want to make an img element unselectable and undraggable because I'm using it as a window resizing control (clicking and dragging on the surrounding div resizes a window).
It works perfectly fine as the following:
noSelect[x].ondragstart = function() {return false};
But since this will be used in a firefox(3.6.*) extension which uses an XPCNativeWrapper around every HTMLElement, I cannot use ".onsdragstart" and have to use ".addEventListener"
The problem is the equivalent to the above code isn't working. Clicking and dragging the img triggers firefox's default image dragging, instead of resizing my window in the following:
noSelect[x].addEventListener("dragstart", function () {return false}, false)
Are the two lines of code quoted above not equivalent?
Full context for unselectable objects:
var noSelect = document.getElementsByClassName("noSelect")
for (x in noSelect) {
if (x == "length")
break
noSelect[x].unselectable = "on";
noSelect[x].onselectstart = function(){return false};
noSelect[x].ondragstart = function() {return false};
noSelect[x].style.userSelect = "none"; // w3c standard
noSelect[x].style.MozUserSelect = "none"; // Firefox
}
addEventListener registers an EventListener, which doesn't have any special return code treatment.
Returning false from most on*
event handlers cancels the event per the HTML spec, in regular EventListener this is achieved by calling event.preventDefault()
as Neil mentioned in his answer.
I don't know why function() { return false; }
doesn't work, but I do know that function(event) { event.preventDefault(); }
will work in Firefox.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With