js 绑定事件没有触发的离奇事件 - 与冒泡无关-CSDN博客

本以为页面中的元素只要没有添加点击事件，就会直接穿透...

然而并不是这样

事件会穿透子元素向上冒泡，但是层级更高的元素会“拦截”事件

<script>
    $('.up').click(function(){
        alert('Oooooooh!------U');
    })
    $('.down').on('click', function(){
        alert('Oooooooh!------D');
    })</script>

<div class="down">D</div>
<div class="up">U</div>

<div class="down">D
    <div class="up">U</div>
</div>

只说区别，点击深红色部分

第一种情况，1个输出。触发自己的事件，同时会“拦截”粉色身上的绑定事件

第二种情况，2个输出。会逐级向上冒泡触发父级身上的绑定事件

上层元素（写在后面的.. z-index大的）确实会阻挡下层元素的事件..
事件冒泡是相对于嵌套的父子关系而言的
jQuery 中 on 事件绑定会冒泡。原生 js 也冒泡。冒泡利大于弊
jQuery 阻止冒泡 event.stopPropagation() | return false
opacity 为 0 的元素也会触发和阻挡事件

如果事件离奇地拒绝被触发，可以排查看看是不是被透明元素遮盖了..

转载于:https://www.cnblogs.com/yier0705/p/7942627.html