.ondragstart not equivalent to .addEventListener("dragstart"

Question

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
    }

Answer 1

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.

Answer 2

I don't know why function() { return false; } doesn't work, but I do know that function(event) { event.preventDefault(); } will work in Firefox.

Answer 3

1. ondragstart is an IE-only event, that's why it is not firing in Firefox. UPDATE: it is more complicated than this, read more here: Javascript ondrag, ondragstart, ondragend
2. if ondragstart were available in FF, you could catch it with x.ondragstart=..., it works in FF too.
3. addEventListener is just a nicer way of assigning event handlers, it allows you to attach more than one handlers for an event to an element. IE has a sorf-of-equivalent called attachEvent.

About your problem: in non-IE browsers, to make an object unselectable, you have to catch the onmousedown event and prevent the default behavior.

Answer 4

image.addEventListener('dragstart', (e) => e.preventDefault())