触发“ touchstart”事件时如何防止“滚动”

Question

我有一个可滚动元素，在其中添加了两个事件处理程序（“ touchstart”和“ scroll”）。 如果自己开除，两者都可以正常工作。 但是，当触发“ touchstart”事件时，我需要防止触发“ scroll”，但是仍然需要“ scroll”事件可用。 原因是两个事件都调用相同的函数，因此，当逻辑多次运行时，这会使应用程序看起来有问题。

我创建了一个基本的小提琴，这里是链接：

http://jsfiddle.net/alejandro1585/0t7v76m7/3/

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：

.main-container{
    border:  1px solid red;
    width: 120px;
    height:200px;
    overflow-y: auto;
}

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();

Answer 1

您应该能够仅在触摸开始时停止事件传播，并且仍然保持滚动性

function touch(e){
  console.log("touch", e);
  e.stopPropagation();
};