滚动时如何在移动设备上禁用点击事件? [英] How to disable click events on mobile devices when scrolling?

问题描述

在移动设备上滚动/拖动时禁用点击事件的最佳方法是什么?我遇到的问题是，假设用户在向下滚动移动设备上的页面时单击了按钮.我对按钮的任何效果都会给用户留下印象.

What's the best method for disabling click events while scrolling / dragging on a mobile device? The problem I have is lets say a user clicks on a button while scrolling down the page on a mobile device. Any effects I have on the buttons gives the impression that the user clicked.

寻找解决方案已有数小时之久，却没有发现任何有效的方法.希望有人能给我我正在寻求的专家指导！

Been looking for a solution for hours, have not found anything that is working. Hoping someone can give me the expert guidance that I am seeking!

干杯:)

推荐答案

注意:我正在使用jQuery

您可以使用scrollTop属性来跟踪文档的滚动.

You can use the scrollTop property to track the scrolling of the document.

$(".className")[0].ownerDocument.scrollingElement.scrollTop

，然后使用Disabled属性禁用按钮.

and then used the disabled attribute to disable the button.

$("button").attr("disabled","");

下面是测试其工作方式的完整代码.运行代码段.

var pageTopPosition = $(".long-page")[0].ownerDocument.scrollingElement.scrollTop;

setInterval(function() {
  if (pageTopPosition != $(".long-page")[0].ownerDocument.scrollingElement.scrollTop) {
    $("button").attr("disabled", "");
  } else {
    $("button").removeAttr("disabled");
  }
  pageTopPosition = $(".long-page")[0].ownerDocument.scrollingElement.scrollTop;
}, 100);

.long-page {
  height: 2000px;
}
.popup {
  width: 100%;
  background-color: #FFEFD5;
  color: red;
  text-align: center;
  position: fixed;
  top: 0;
  font-size: 1.5em;
  padding: 15px;
}

<div class="long-page">

</div>
<div class="popup">
  <button>My Button</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

这篇关于滚动时如何在移动设备上禁用点击事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！