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
    }

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
    }

• javascript
• drag-and-drop
• firefox-addon
• dom-events

Share Follow edited Jul 14, 2019 at 8:39 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jan 14, 2011 at 6:00 TinyTimZamboniTinyTimZamboni 5,34533 gold badges3030 silver badges2424 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

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.

1. ondragstart is an IE-only event, that's why it is not firing in Firefox. UPDATE: it is more plicated 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.

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