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

Question

我有一个用 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);

您可以删除超时！在我的情况下使它更好地工作;）

Answer 1

假设，您可以在拖动开始或其他任何内容上设置变量或类。然后在您的 .foo 单击事件函数中，如果您的 dragstart 引用为真，则 e.preventDefault()。

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