【JavaScript】js阻止冒泡事件

日常开发中经常遇到需求，外层div设置了单击触发事件，内部某个按钮需要设置单独的单击触发事件。

当点击了内部按钮时，会发现同时触发了两个单击事件，造成意外BUG。


通过在按钮的单击事件所调取的函数中设置阻止冒泡事件可以有效的阻止外层单击事件的触发。


  1. event.stopPropagation();（阻止冒泡）

  2. event.cancelBubble = true;（阻止冒泡）

  3. event.preventDefault();（阻止浏览器默认行为）


示例：

1
2
3
4
5
6
7
8
9
10
11
12
<li>
    <a href='http://www.iskeys.com'>点击a</a>
</li>
<script>
    $('li').click(function () {
        alert('点击了li');
    });
    $('a').click(function () {
        alert('点击了a');
        event.stopPropagation(); //阻止继续执行li的click监听
    });
</script>


本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

猿教程
请先登录后发表评论
  • 最新评论
  • 总共0条评论