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/...

@ 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这个鬼。因为点击的按钮是可以滑动的，因此会报这个警告，这个警告在这里阻止了这个点击事件：&nbsp; &nbsp; jQuery('#newSubProduct').delegate('.js-sub-menu','tap',function(e){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; e.stopPropagation();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var id = jQuery(this).attr('data-id');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; LevelThreeSubMenu(id);&nbsp; &nbsp; &nbsp; &nbsp; })解决了如上的问题！