无法阻止被动事件侦听器内的默认

Question

我正在使用Framework7可排序列表,它运行良好,只是在列表更改时不会触发事件.

所以我正在尝试一些内置事件:

$('.sortable-handler').on('touchstart', function (e) {
    e.preventDefault();
    alert('touchstart');
});

$('.sortable-handler').on('touchmove', function (e) {
    e.preventDefault();
    console.log('touchmove');
});

$('.sortable-handler').on('touchcancel', function (e) {
    e.preventDefault();
    console.log('touchcancel');
});

$('.sortable-handler').mouseleave(function (e) {
    e.preventDefault();
    console.log('mouseleave');
});

..但我得到的是:

由于目标被视为被动,因此无法阻止被动事件侦听器内的默认.请参阅 https://www.chromestatus.com/features/5093566007214080

我应该寻找哪种事件来获取每种类型的更新列表？

Answer 1

看到这篇博文.如果您preventDefault每次都打电话,touchstart那么您还应该有一个CSS规则来禁用触摸滚动

.sortable-handler {
  touch-action: none;
}

Answer 2

在普通 JS 中添加{ passive: false }为第三个参数

document.addEventListener('wheel', function(e) {
    e.preventDefault();
    doStuff(e);
}, { passive: false });

Answer 3

为了我

document.addEventListener("mousewheel", this.mousewheel.bind(this), { passive: false });

做到了绝招（{ passive: false }部分）。

Answer 4

要在用户在新位置释放当前排序元素时处理 Framework7 中的可排序列表，您可以使用以下代码：

  $$('li').on('sortable:sort',function(event){
    alert("From " + event.detail.startIndex + " to " + event.detail.newIndex);
  });

小提琴：https : //jsfiddle.net/0zf5w4y7/

Answer 5

我在使用猫头鹰旋转和滚动图像时遇到这个问题。

因此，只需在页面中添加以下 CSS 即可解决问题。

.owl-carousel {
-ms-touch-action: pan-y;
touch-action: pan-y;
}

或者

.owl-carousel {
-ms-touch-action: none;
touch-action: none;
}