滚动时如何在移动设备上禁用点击事件? [英] 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屋!