Событие mouseup не вызывается, когда вы отпускаете кнопку на другом элементе или где-то вне
У меня два div элементы. Когда я нажимаю кнопку мыши на одном из них, затем перемещаю мышь на другой или просто куда-то еще, а затем отпускаю кнопку, mouseup Событие не сработало. На самом деле он срабатывает, но только в течение первых нескольких случайных моментов (обычно 1…10). Тогда это останавливается. Курсор мыши превращается в знак остановки и только mousedown событие запущено.
Я пытался добавить mouseup список событий для document.documentElement а также document элемент, как это было предложено здесь, но это не помогло. Курсор мыши по-прежнему превращается в знак остановки после нескольких успешных наведений мыши и не срабатывает до перезагрузки страницы.
Он по-прежнему срабатывает отлично, если вы отпустите кнопку на том же элементе.
Как сделать mouseup событие, которое будет срабатывать всегда, когда кнопка мыши отпущена, независимо от того, где вы начали и закончили? Это важно для моей программы.
Я проверил это в Chrome. В Firefox он работает практически так же, но количество возможных mouseup событий на другом, потом запущенном элементе немного больше (до 20). Затем появляется тот же знак остановки. Вот скриншот
Вот JSFiddle
Я нашел решение!!!
Эта тема была очень полезной.
Так почему браузер показывает знак остановки при перемещении мыши с нажатой кнопкой? Потому что он думает, что вы пытаетесь перетащить этот элемент! Но почему он не протестует, когда вы делаете это в первый (или несколько раз)? Потому что, нажимая кнопку мыши в первый раз, вы просто выбираете этот элемент. Затем вы пытаетесь перетащить его, и только это вызывает протест браузера и показывает знак остановки. Во время показа знака остановки браузер не может запускать события мыши.
Как запретить браузеру думать, что вы собираетесь выделить и перетащить этот элемент? Это очень просто. Просто добавь -webkit-user-select: none; в CSS для этого элемента (это для Chrome, для Firefox префикс будет -moz- и так далее).
Теперь все события мыши будут работать независимо от того, когда, почему и в каком порядке были нажаты кнопки мыши!
Вот JSFiddle