无法在被动事件侦听器中防止默认

IT技术 javascript jquery html-framework-7
2021-03-11 05:46:26

我正在使用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

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

6个回答

请参阅此博客文章。如果你调用preventDefaulteverytouchstart那么你也应该有一个 CSS 规则来禁用触摸滚动，比如

.sortable-handler {
  touch-action: none;
}
来自开发文档 - 如果您有一个水平轮播，请考虑应用touch-action: pan-y pinch-zoom它，以便用户仍然可以垂直滚动和正常缩放。
2021-04-24 05:46:26
@里克·拜尔斯。你能举个例子吗？我对 jquery 移动swipe事件有同样的问题
2021-04-26 05:46:26
@Rick拜尔斯，我怎么能添加preventDefault()的wheel mousewheel DOMMouseScroll
2021-04-30 05:46:26

给我 

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

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

它在没有绑定 mouseweel 的情况下对我有用。我用它代替了 e.preventDefault。window.addEventListener('wheel', { passive: false })
2021-04-28 05:46:26
在伪函数为我解决问题之后添加passive:false。
2021-05-03 05:46:26

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

document.addEventListener('wheel', function(e) {
    e.preventDefault();
    doStuff(e);
}, { passive: false });
如果您还需要使用捕获而不是冒泡（这意味着第三个参数将是true），则第三个参数应该是{capture: true, passive:false}。有关第三个参数的完整选项列表，请参阅developer.mozilla.org/en-US/docs/Web/API/EventTarget/ ...。
2021-05-08 05:46:26
我该怎么做才能对听众做出反应
2021-05-17 05:46:26

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

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

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

他们有。他们在页面底部提到了它。请参阅文档framework7.io/docs/sortable-list.html#sortable-events
2021-04-21 05:46:26
啊，伙计，你是怎么知道这个事件的？他们的文档中没有提到它。
2021-04-25 05:46:26
似乎可以通过App Instance Event触发相同的行为 sortableSort
2021-05-17 05:46:26

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

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

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

或者

.owl-carousel {
-ms-touch-action: none;
touch-action: none;
}
感谢您的回答，我特意寻找 owl-carousal，这很有用 :)
2021-05-09 05:46:26
很好的答案。猫头鹰旋转木马的东西lmao
2021-05-17 05:46:26
其它你可能感兴趣的问题
上一篇聚焦 <input> 时防止 iPhone 默认键盘 下一篇正则表达式提取子串，由于某种原因返回2个结果