时间戳

首页 > 解决方案 > 如果实体正在快速更新，则 DOM Click 事件永远不会注册

javascript - 如果实体正在快速更新，则 DOM Click 事件永远不会注册

问题描述

这个可以点击：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 实体时，才能观察到单击事件，我想观察它并解决此问题

标签： javascriptdombrowser

解决方案

一个解决方案来自我们的社区，onmousedown而不是onclick在这种情况下工作

这是小提琴：https ://jsfiddle.net/w93hLkpe/1/

事后看来，这确实是有道理的，实体在鼠标悬停之前被删除，点击没有完成，我很惊讶网上没有任何关于这个问题/解决方案的信息——我最终整合了这个修复，以及本地化尽可能更新，它们一起使用户体验按预期顺利

推荐阅读