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:6i.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);

        })

解决了如上的问题！