событие mouseup останавливает событие click в firefox

У меня странная проблема !

В элементе div я слушаю события mousedown, mouseup и click.

Но в Firefox событие click никогда не работает! На Chromium или Trident (вау) все работает отлично. Если элемент является кнопкой, он работает, но не в 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/


javascript click firefox mouseup mousedown
person Community    schedule 23.12.2015    source источник
comment
Уже ответили здесь: stackoverflow.com /вопросы/10208944/   -  person Alexander Mikhalchenko    schedule 23.12.2015
comment
@АлександрМ. проблема в том, что событие click не запускается или предотвращается. Теперь странно, если вы выдаете ошибку, то запускаются все три события. Пример скрипта   -  person Rajesh    schedule 23.12.2015
comment
Зарегистрирована ошибка. Пожалуйста, проверьте, помогает ли это.   -  person Rajesh    schedule 23.12.2015
comment
Что @Dr. Молле имел в виду, что когда вы меняете html div, узел изменяется, и, согласно документации, если mouseDown, mouseUp запускаются на одном узле, тогда запускается событие щелчка. Поскольку вы обновляете узел, после mouseUp он считается новым узлом, что странно! Но если вы не обновляете узел, он работает нормально.   -  person Rajesh    schedule 23.12.2015

Ответы (2)


arrow_upward
2
arrow_downward

Проблема (я бы назвал это ошибкой), похоже, связана с модификацией innerHTML.

В соответствии со спецификацией щелчок должен срабатывать, когда mousedown и mouseup стреляют по одной и той же цели (элементу).

Когда вы изменяете innerHTML при наведении курсора мыши, вы заменяете узел (текстовый узел) новым текстовым узлом, цель для перемещения мыши, похоже, меняется.

Но это не ожидаемое поведение, потому что целью должен быть ElementNode, а не TextNode (и это все тот же Element).

Возможное исправление: измените содержимое существующего TextNode вместо 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>

person Dr.Molle    schedule 23.12.2015
comment
Здесь это неактуально (удалил) - person Dr.Molle; 23.12.2015
comment
@Dr.Molle, небольшой вопрос: если я обновлю элемент внутри div с помощью textContent, обновится ли узел/элемент, сделав себя новым узлом? - person Rajesh; 23.12.2015
comment
Спасибо, я решил свою проблему, если у вас есть элемент внутри прослушиваемого элемента, вы можете установить правило css pointer-events: none и спокойно редактировать его. - person ; 23.12.2015
comment
Я бы все равно назвал это ошибкой в ​​​​2019 году. Например, здесь описывается, почему html-элемент select неожиданно закрывается при нанесении мусса. Вот почему мы не видим, чтобы элемент select использовался часто. Странное поведение в Firefox. - person NVRM; 26.02.2019

arrow_upward
0
arrow_downward

Вы должны понимать разницу между

mousedown : [ПРОСТОЕ СОБЫТИЕ] Запускается, когда любая кнопка мыши (левая/средняя/правая) нажимается ВНИЗ, т.е. нажимается

mouseup : [ПРОСТОЕ СОБЫТИЕ] Запускается, когда любая кнопка мыши (левая/средняя/правая) поднимается вверх, т. е. отпускается.

щелчок : [КОМПЛЕКСНОЕ СОБЫТИЕ] Запускается, когда кнопка мыши опускается и поднимается после этого полного цикла.

Поскольку мы добавляем слушателей к BASIC SIMPLE EVENTS, событие CLICK никогда не срабатывает!

Дополнительные сведения см. на странице http://javascript.info/tutorial/mouse-events.

person Mr.Arjun    schedule 23.12.2015
comment
Арджун, пожалуйста, проверьте следующие fiddle как на FF, так и на Chrome. - person Rajesh; 23.12.2015
comment
как я уже сказал, это работает с кнопкой, но не с div, который вы можете увидеть здесь javascript.info/tutorial/mouse-events#events-fire-order - person ; 23.12.2015