在触摸设备上，滚动是使用 javascript 创建的，如何防止触摸触发单击

On a touch device, where the scroll was created with javascript, how to prevent touch triggering click?

本文关键字：触摸 创建 何防止 单击 javascript 滚动      更新时间：2023-09-26

我有一个用AngularJs开发的应用程序，并且正在使用iScroll在列表或网格上创建滚动条。在滚动时触摸和拖动时，有时会触发嵌套元素上的"单击"事件。

我的问题是，如何避免这种情况发生？

$('.foo').on('click', function(e){ ... });

假设列表如下所示：

<div id="iscroll_instance_will_work_here">
   <div class="scrollable">
      <ul>
        <li class="foo"> ... </li>
        <li class="foo"> ... </li>
      </ul>
   </div>
</div>

感谢您的观看！

/* 更新 **/

用户 Rob 建议，并且工作得很好，下面是一个例子：

                document.addEventListener('touchstart', function(e) {
                    e.preventDefault();
                    console.log("touchStart triggered!");
                    $('html').addClass('isDragging');
                }, false);
                document.addEventListener('touchend', function(e) {
                    e.preventDefault();
                    console.log("touchEnd triggered!");
                    setTimeout(function(){
                        $('html').removeClass('isDragging');
                    }, 200);
                }, false);

您可以删除超时！就我而言，它可以更好地工作;)

假设，您可以在拖动启动或其他任何内容上设置变量或类。然后在你的 .foo 点击事件函数中，如果你的 dragstart 引用为 true，则 e.preventDefault（）。

然后确保取消设置变量或在拖动停止处删除类。

相关文章：