无法阻止被动事件侦听器中的默认设置

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');
});

..但我得到的是：

Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

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

Answer 1

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

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

Fiddle : https://jsfiddle.net/0zf5w4y7/

Answer 2

看到这个 blog post。如果你在每个 touchstart 上调用 preventDefault 那么你还应该有一个 CSS 规则来禁用触摸滚动，比如

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

Answer 3

对我来说

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

成功了（{ passive: false } 部分）。

Answer 4

我在使用 owl carousal 和滚动图像时遇到这个问题。

因此，只需在您的页面中添加以下 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();

Answer 7

添加到 Rick 买家的回答中

See this blog post. If you call preventDefault on every touchstart then you should also have a CSS rule to disable touch scrolling like

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

以下是 Javascript 中的操作方法：

handlerList = document.getElementsByClassName("sortable-handler");
for (var i=0, len=handlerList.length|0; i<len; i=i+1|0) {
    handlerList[i].style.style.touchAction = "none";
}

Answer 8

打电话前先检查一下 preventDefault

event.cancelable && event.preventDefault()

就是这样！

更多：

touchstart & touchmove 默认被动 true 由于性能原因，在大多数情况下，您不需要更改默认优化。

Answer 9

我为我的代码制定了不同的解决方案。我需要为 touchend 事件禁用被动属性。我使用的是 jquery 3.5。您可以试试下面的代码：

jQuery.event.special.touchstart = {
        setup: function (_, ns, handle) {
            this.addEventListener('touchend', handle, { passive: !ns.includes('noPreventDefault') });
        }
    };

无法阻止被动事件侦听器中的默认设置

Unable to preventDefault inside passive event listener

javascript

jquery

html-framework-7