return false,e.preventDefault(),e.stopPropagation()的区别

川长思鸟来 2022-05-22 04:40 184阅读 0赞

**e.stopPropagation()阻止事件冒泡**

<head>
        <title></title>
        <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    </head>
    <body>
    <table>
        <tr>
            <td><span>冒泡事件测试</span></td>
        </tr>
    </table>
    </body>

我们先看这段代码：

我们会看到这样的情况：span alert -> td alert -> table alert。这就叫事件冒泡。就是从下到上，从里到外，事件依次触发。

有的时候我们不希望事件冒泡咋办？

如果想获得事件相关信息，就要给匿名方法加一个e对象，e就是事件对象。

**e.preventDefault()阻止事件默认行为。**

$("a").click(function (e) {
        alert("默认行为被禁止喽");
        e.preventDefault();
    });

**return false等效于同时调用e.preventDefault()和e.stopPropagation()**

return false除了阻止默认行为之外，还会阻止事件冒泡。如果手上有一份jquery源代码的话，可查看其中有如下代码：

if (ret===false){
        event.preventDefault();
        event.stopPropagation();
    }

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

![20191229112121499.png][]

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[http_www.baidu.com]: http://www.baidu.com/
[20191229112121499.png]: /images/20220522/2816e2fa89b24309b89157f581470aa8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20220522/0f3ba2f216f54bfbb6d1263921454992.png