Javascript 如何预防；卷轴；当；touchstart“；事件被触发

我有一个可滚动元素，其中添加了两个事件处理程序（“touchstart”和“scroll”）。如果由他们自己开火，这两种方法都能很好地工作。但是，当触发“touchstart”事件时，我需要防止触发“scroll”，但我仍然需要“scroll”事件可用。原因是两个事件调用相同的函数，因此当逻辑运行多次时，会导致应用程序看起来有问题

我已经创建了一个基本小提琴，下面是链接：

HTML:

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

函数myFunction（e）{
log（“myFunction正在执行”，e）；
};
/*方法将处理程序添加到可滚动列表中，以便可以触发显示或隐藏标题的函数*/
var scrollShowHideHeaderInit=函数（）{
var divObject=document.getElementsByClassName（“主容器”）；//可滚动元素对象
对于（var i=0；i

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

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

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

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