[英]How to prevent “scroll” when a “touchstart” event is fired
I have an scrollable element to which I have added two event handlers ("touchstart" and "scroll"). 我有一个可滚动元素,在其中添加了两个事件处理程序(“ touchstart”和“ scroll”)。 Both work perfectly fine if fired by themselves.
如果自己开除,两者都可以正常工作。 However, when the "touchstart" event is fired, I need to prevent the "scroll" from being fired, but I still need the "scroll" event to be available.
但是,当触发“ touchstart”事件时,我需要防止触发“ scroll”,但是仍然需要“ scroll”事件可用。 The reason is that both events call the same function and so it is causing the app to look buggy when the logic runs many times.
原因是两个事件都调用相同的函数,因此,当逻辑多次运行时,这会使应用程序看起来有问题。
I have created a basic fiddle and here is the link: 我创建了一个基本的小提琴,这里是链接:
http://jsfiddle.net/alejandro1585/0t7v76m7/3/ http://jsfiddle.net/alejandro1585/0t7v76m7/3/
HTML: HTML:
<div class="main-container">
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
Hello world
</div>
CSS: CSS:
.main-container{
border: 1px solid red;
width: 120px;
height:200px;
overflow-y: auto;
}
JAVASCRIPT: JAVASCRIPT:
function myFunction(e) {
console.log("myFunction is being executed", e);
};
/*Method adds handlers to the scrollable list so that functions to show or hide the header can be triggered*/
var scrollShowHideHeaderInit = function () {
var divObject = document.getElementsByClassName("main-container"); //Scrollable element object
for (var i = 0; i < divObject.length; i++) {
divObject[i].addEventListener("scroll", myFunction);
divObject[i].addEventListener("touchstart", myFunction);
};
};
scrollShowHideHeaderInit();
You should be able to just stop event propagation on touch start and still maintain scroll-ability 您应该能够仅在触摸开始时停止事件传播,并且仍然保持滚动性
function touch(e){
console.log("touch", e);
e.stopPropagation();
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.