黑马程序员技术交流社区

标题: e.preventDefault()与e.stopPropagation()的区别 [打印本页]

---

作者: 庭院深深深几许    时间: 2019-3-7 10:42
标题: e.preventDefault()与e.stopPropagation()的区别


　　e.stopPropagation()阻止事件冒泡

[HTML] 纯文本查看 复制代码

<table border='1'>

    <tr>

        <td><span>冒泡事件测试</span></td>

        <td><span>冒泡事件测试2</span></td>

    </tr>

</table>

　　我们先看这段js代码：

[HTML] 纯文本查看 复制代码

<script>

   $('table').on('click', function (e) {

      alert('table alert!');

   });

   $('tr').on('click',function(){

      alert('tr alert');

   });

   $('span').on('click',function(){

      alert("span alert!")

   });

</script>

--------------------- 

　　我们会看到这样的情况：span alert -> td alert -> table alert。这就叫事件冒泡。就是从下到上，从里到外，事件依次触发。
　　有的时候我们不希望事件冒泡咋办?

[HTML] 纯文本查看 复制代码

<script>

    $(function(){

        $('table').on('click','span',function(e){

            alert('span alert!');

            e.stopPropagation();

        });

        $('table').on('click',function(){

            alert('table alert!');

        });

    })

</script>

--------------------- 

　　这样，点击span时，弹出"span alert!"对话框即结束，然后禁止事件冒泡，“table alert!”对话框即不会触发。
　　如果想获得事件相关信息，就要给匿名方法加一个e对象，e就是事件对象。
　　e.preventDefault()阻止事件默认行为。

[HTML] 纯文本查看 复制代码

$("a").click(function (e) {

     alert("默认行为被禁止喽");

     e.preventDefault();

});



<a href="http://www.baidu.com">测试</a>

　　return false等效于同时调用e.preventDefault()和e.stopPropagation()
return false除了阻止默认行为之外，还会阻止事件冒泡。如果手上有一份jquery源代码的话，可查看其中有如下代码：

[HTML] 纯文本查看 复制代码

if (ret===false){

　　event.preventDefault();

　　event.stopPropagation();

}

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2