jQuery 点击这三个tab，点击事件不起作用

Question

<div class="mui-scroll scroll-nav">
    <div class="js-anviz-tab mui-control-item anviz-item-all" data-id="5-0" style="">All</div>
    <div class="js-anviz-tab js-sub-menu mui-control-item mui-active" data-id="17">Iris</div>
    <div class="js-anviz-tab js-sub-menu mui-control-item" data-id="11">Facial</div>
    <div class="js-anviz-tab js-sub-menu mui-control-item" data-id="5">Fingerprint</div>    
</div>

jQuery('.js-sub-menu').on('tap',function(e){
    var index = jQuery(this).index();
    var id = jQuery(this).attr('data-id');
    LevelThreeSubMenu(id);
});

点击一次，报一次这个错误：

mui.min.js:8 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/...

1. @ mui.min.js:8

(anonymous) @ mui.min.js:6
(anonymous) @ mui.min.js:6
i.each @ mui.min.js:6
(anonymous) @ mui.min.js:6

这到底是个什么错误啊？怎么解决？

Answer 1

使用 Delegate 方法，事件处理函数绑定在根元素上， 由于事件会冒泡，用它来处理子元素上的事件，正好可以绕过passive这个鬼。
因为点击的按钮是可以滑动的，因此会报这个警告，这个警告在这里阻止了这个点击事件：

    jQuery('#newSubProduct').delegate('.js-sub-menu','tap',function(e){
            e.stopPropagation();
            var id = jQuery(this).attr('data-id');
            LevelThreeSubMenu(id);
        })

解决了如上的问题！

Answer 2

这好像是Passive Event Listeners这个特性引起的，可以看下MDN 资料 资料

Answer 3

语法错了吧,tap是什么鬼

jQuery('.js-sub-menu').on('click',function(e){
    var index = jQuery(this).index();
    var id = jQuery(this).attr('data-id');
    LevelThreeSubMenu(id);
});

Answer 4

1，这个不是错误，只是一个警告，并不影响代码的执行。
2.如果你引用的不是 jq.mobble文件， 是没有 tap这个事件的， 请你先用click 试试
3.jq 本身不支持tap 事件， zepto.js 和touch.js才支持tap

Answer 5

tap改成click

Answer 6

tap这个方法的确是没有见过，为什么不用click呢。
你可以参考一下文档

Answer 7

直接用click就OK呀

Answer 8

tap是什么方法,没见过jquery还有这种方法