超简单讲解JQ冒泡问题

当JQ代码越写越长的时候,冒泡的问题就会显得突出.所以对JQ冒泡问题的了解是十分必要的.

那么什么是冒泡了,个人简单的理解就是在触发子元素事件的时候父元素的事件也被动触发.

举个简单例子:

例如有一个十分必要的全局mousedown和一个button的click(mousedown先于click触发)

     document.onmouseup = function (e) {
      alert("document")
         }

     $("#click").on('click', function (event) {
         alert("button")
     })

我们只想要触发按钮的点击事件

然而先执行了父元素的mousedown.,就是所谓的冒泡(父元素的事件冒到了上面,)

所以我们就需要 阻止冒泡

 document.onmouseup = function (e) {
      alert("document")
         }

     $("#click").on('click', function (event) {
         alert("button")
     })
     $("#click").on('mouseup', function (event) {
         event.stopPropagation();//阻止父元素的冒泡,特别注意,事件必须一致
     })

只触发了按钮的点击事件

特别注意,阻止冒泡,必须事件一致

另外浏览器的默认行为有时候也会冒上来干扰,阻止浏览器的默认行为event.preventDefault();

使用return false会同时具上述两个的阻止功能.