the mouseup event stop the click event on firefox

Question

I have a strange problem !

On a div element i listen a mousedown, mouseup, and click event.

But on firefox, the click event never work ! On Chromium or Trident ( wow ) it work perfectly. If the element is a button it work, but not on a div.

<div>click me</div>
<script>
    var div = document.querySelector('div');

    function fn(e)
    {
        if(e.target === div)
            div.innerHTML = 'event ' + e.type;
    }

    // work
    div.addEventListener('mousedown',fn);

    // work
    div.addEventListener('mouseup',fn);

    // nop !
    div.addEventListener('click',fn);

    // nothing !
    document.addEventListener('click',fn,true);
</script>

https://jsfiddle.net/aL7q8qpv/7/

Already answered here: http://stackoverflow.com/questions/10208944/div-onclick-event-not-called-in-mozilla — Alexander Mikhalchenko, Dec 23 '15 at 10:30
@AlexanderM. the issue is `click` event is not getting fired or is prevented. Now weird thing is, if you throw error then all three events are triggered. [Sample Fiddle](https://jsfiddle.net/aL7q8qpv/8/) — Rajesh, Dec 23 '15 at 10:46
There is a registered [bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1004895). Kindly check if this helps. — Rajesh, Dec 23 '15 at 10:53
What @Dr. Molle meant was, when you are changing html of the div, node is getting changed and as per documentation, if mouseDown, mouseUp are fired on same node then click event is triggered. Since you are updating node, after mouseUp, it is considered as new node, which is weird! But if you do not update node, it works fine. — Rajesh, Dec 23 '15 at 11:24

Dr.Molle · Accepted Answer · 2015-12-23T11:14:07.763

2

The issue (I would call it bug) seems to be the modification of the innerHTML.

Based on the specification a click should be triggered when mousedown and mouseup fire on the same target(element).

When you modify the innerHTML on mousedown, you replace a Node (a TextNode) with a new TextNode, the target for mouseup seems to change.

But that isn't the expected behaviour, because the target should be a ElementNode, not a TextNode(and it's still the same Element).

Possible fix: modify the content of the existing TextNode instead of the innerHTML:

var div = document.querySelector('div');


function fn(e)
{
 div.firstChild.data='Event:'+e.type;
}

div.addEventListener('mousedown',fn);

div.addEventListener('mouseup',fn);

div.addEventListener('click',fn);

<div>
  click me
</div>

edited Dec 23 '15 at 11:14

answered Dec 23 '15 at 10:56

Dr.Molle

116,463
16
195
201

It's irrelevant here(I've removed it) – Dr.Molle Dec 23 '15 at 11:14
@Dr.Molle, a small question, if I update an element inside a div using `textContent`, will node/ element update itself, making itself new node? – Rajesh Dec 23 '15 at 11:28
2

Thank you, i solved my problem, if you have an element inside the element listened, you can set the css rule "pointer-events: none" on, and edit him quietly. – Dec 23 '15 at 11:41
I would still call it a bug in 2019. For example this describe why the `select` html element is closing unexpectedly on mousse up .That's why we are not seeing the select element much in use. Behaviors in Firefox is strange. – NVRM Feb 26 '19 at 13:19

score 0 · Answer 2 · answered Dec 23 '15 at 10:54

0

You need to understand the difference between the

mousedown : [SIMPLE EVENT] Fired when any mouse button (left/middle/right) goes DOWN i.e. pressed

mouseup : [SIMPLE EVENT] Fired when any mouse button (left/middle/right) goes UP i.e. released

click : [COMPLEX EVENT] Fired when the mouse button goes down and comes up, after this complete cycle.

As we are adding listeners to BASIC SIMPLE EVENTS, the CLICK event never get fired!

More at http://javascript.info/tutorial/mouse-events

answered Dec 23 '15 at 10:54

Arjun

3,248
18
35

Arjun, kindly check following [fiddle](https://jsfiddle.net/aL7q8qpv/8/) on both FF and chrome. – Rajesh Dec 23 '15 at 10:55
like i say, it work on a button but not on a div you can see here http://javascript.info/tutorial/mouse-events#events-fire-order – Dec 23 '15 at 10:58

the mouseup event stop the click event on firefox

2 Answers2