Событие DOM Click никогда не регистрируется, если объект быстро обновляется - PullRequest
0 голосов
/ 15 февраля 2020

На эту кнопку можно нажать: https://jsfiddle.net/tgrL3vnh/1/

<div id='gg'>One second</div>
<style></style>
<script>
    var click_num=1;
    setInterval(function(){
        var html="<div onclick='alert(click_num++)'>I can be clicked!</div>";
        // $('#gg').html(html);
        document.getElementById('gg').innerHTML=html;
    },2000);
    document.addEventListener('click', function (event) {
        console.log(click_num);
    }, false);
</script>

На эту кнопку нельзя нажать: https://jsfiddle.net/tgrL3vnh/2/

<div id='gg'>One second</div>
<style></style>
<script>
    var click_num=1;
    setInterval(function(){
        var html="<div onclick='alert(click_num++)'>I can't be clicked!</div>";
        // $('#gg').html(html);
        document.getElementById('gg').innerHTML=html;
    },20);
    document.addEventListener('click', function (event) {
        console.log(click_num);
    }, false);
</script>

У меня есть html, включая игру с интерфейсами, которые обновляются время от времени, примерно в 5% случаев, щелчки по этим интерфейсам теряются, это очень раздражает, мне интересно, как я могу обойти это

В В приведенном выше примере вы можете наблюдать этот сценарий в его наиболее экстремальной форме: если сущность обновляется каждые 20 мс, вы никогда не можете щелкнуть по ней, даже при 2000 мс, иногда щелчки не регистрируются, но если вы посмотрите на журналы консоли, клики могут регистрироваться где-либо еще на странице

TL; DR: только когда вы щелкаете обновленную сущность DOM, событие щелчка никогда не может наблюдаться, я хочу наблюдать его и обойти проблему

1 Ответ

0 голосов
/ 20 февраля 2020

Одно решение пришло от нашего сообщества, onmousedown вместо onclick работает в этом сценарии

Это была скрипка: https://jsfiddle.net/w93hLkpe/1/

Оглядываясь назад , это имеет смысл, сущность удаляется до того, как наведется курсор мыши, щелчок не завершен, я просто удивлен, что в сети не было никакой информации об этой проблеме / решении - я закончил тем, что интегрировал это исправление вместе с локализованными обновлениями везде, где возможно, вместе они делают UX гладким, как и ожидалось

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...