javascript - Jquery Tap and Touch 这么长的 Action

Question

我有一个 tabber，当我点击按钮时

$(document).on('click touchstart', 'element', function() { /*Some code*/ });

tabber 开关，如果手指区域有按钮或链接 - 它被激活。

如何避免这种影响？

提前致谢!

像这样的东西:jsfiddle.net/r99headp(在 Google Chrome 激活的设备工具栏中)

Answer 1

据我所知，我认为这与 touchstart 事件上的被动事件监听器和事件传播有关。当我尝试像这样将 prevenDefault 添加到您的偶数处理程序时:

$(function() {
    $(document).on('click touchstart', '.js-next', function(e){
        e.preventDefault();
        $('.js-tab').click();
    });
});

我在 chrome 中收到此警告:

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

点击该链接，您将在文档中看到:

AddEventListenerOptions defaults passive to false. With this change touchstart and touchmove listeners added to the document will default to passive:true (so that calls to preventDefault will be ignored).

追下去我在 SO 上找到了这个答案:https://stackoverflow.com/a/39187679/1819684这表示 jQuery 在将选项传递给 addEventListener 时存在持续问题。这意味着目前您不能使用 jQuery 并设置 passive: false 来做到这一点。所以我将你的示例代码修改为:https://jsfiddle.net/w9h4an81/

$(function() {
    document.addEventListener('touchstart', function(e) {
        e.preventDefault();
        $('.js-tab').click();
    }, {passive: false});

    $(document).on('click', '.js-next', function(e){
        $('.js-tab').click();
    });
});

要只用 jQuery 来做，你必须做这样的事情:https://jsfiddle.net/6377wdhc/您不能在 document 上收听。

$(function() {
    $('.js-next').on('click touchstart', function(e){
        e.preventDefault();
        $('.js-tab').click();
    });
});