Question

我正在使用Framework7 sortable list并且它运行良好，只是在列表更改时它不会触发事件。

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

$('.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

见blog post。如果您在每个preventDefault上拨打touchstart，那么您还应该有一个CSS规则来禁用触摸滚动，例如

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

Answer 2

对我

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

有花招（{ passive: false }部分）。

Answer 3

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

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

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

Answer 4

使用猫头鹰旋转木马并滚动图像时出现此问题。

因此，只需在页面中的CSS下面添加内容即可解决。

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

或

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

Answer 5

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

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

Answer 6

仍然能够滚动此按钮对我有用

if (e.changedTouches.length > 1) e.preventDefault();

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

6 个答案: