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

最新推荐文章于 2023-12-07 11:27:04 发布
最新推荐文章于 2023-12-07 11:27:04 发布
阅读量916 收藏 1
点赞数
分类专栏： JS+Jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HarderXin/article/details/8264987
版权
()阻止事件冒泡

<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>

我们先看这段代码：

    <script type="text/javascript">
        $(function () {
            $("table").click(function () { alert("table alert"); });
            $("td").click(function () { alert("td alert"); });
            $("span").click(function (){
                    alert("span alert");
            });
        });
    </script>

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

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

    <script type="text/javascript">
        $(function () {
            $("table").click(function () { alert("table alert"); });
            $("td").click(function () { alert("td alert"); });
            $("span").click(function (e){
                    alert("span alert");      
                    e.stopPropagation();
            });
        });
    </script>

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

 

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


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

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

 

 

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

 

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

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

程序员Monkey
关注
专栏目录
jquery-1.11.2.min.js
11-11 1812
/*! jQuery v1.11.2 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/license */ !function(a,b){"object"==typeof module&&"object"==typeof module.exports?module.exports=a.docum...
浅析return false的正确使用
09-04
本文将深入探讨何时以及如何正确地阻止浏览器的默认行为，以及`return false`与`event.preventDefault()`、`event.stopPropagation()`和`event.stopImmediatePropagation()`之间的区别。 首先，`return false`在...
jQuery中的e.preventDefault(), e.stopPropagation()的使用
成长的记忆
07-31 3667
e.preventDefault() 阻止事件的默认行为
e.preventDefault()与e.stopPropagation()的区别
aa_mmnn的博客
05-21 883
e.stopPropagation()阻止事件冒泡 <table border='1'> <tr> <td><span>冒泡事件测试</span></td> <td><span>冒泡事件测试2</span></td> </tr> </table> 我们先看这段js代码： <script> $('ta...
使用jQuery停止操作.preventDefault（）
02-28 156
由于动作不遵循我们可能需要知道当用户提示操作，并可以使用event.isDefaultPrevented()以确定这种方法已被称为是被这个事件触发的事件处理程序。 这可以用来触发一个函数调用。 也可能是动态的URL与XHtmlRequest jQuery的有用与例如HREF =”的index.php？页=接触，而不是contact.php模块抓取网页。 您可能还需要看看MOD改写选项也可以提供这...
html阻止自动刷新,使用onbeforeunload阻止用户刷新
weixin_39617318的博客
06-05 1406
1、onbeforeunload是什么玩意儿onbeforeunload是一个事件，当页面将要被卸载(更新)的时候会被触发。卸载(更新)讲的就是unload事件，当页面关闭后,会触发。2、语法规则window.onbeforeunload = funcReffuncRef指的是一个方法，也就是一个函数引用。3、怎么使用这个东西3.1在HTML中,直接挂载到body上testfunction tes...
return false;和e.preventDefault();的区别
09-05
在JavaScript和jQuery中，`return false;` 和 `e.preventDefault();` 都被用来取消默认行为，但它们之间存在一些微妙的区别。这两种方法通常在处理DOM事件，如点击（click）事件时使用，以防止浏览器执行与事件关联...
e.preventdefault()失效怎么办
04-19
如果您使用的是原生 JavaScript，可以尝试在事件处理函数中加上 return false; 语句，或者使用 event.stopPropagation() 方法。如果您使用的是 jQuery，可以尝试使用 event.preventDefault(); 或者 return false; ...
学习jQuey中的return false
09-03
总之，理解并恰当使用`return false`、`.preventDefault()` 和 `.stopPropagation()` 是编写高效、可控的jQuery事件处理代码的关键。根据实际情况选择合适的方法，可以有效地控制事件的执行流程，提高用户体验。
JS - e.preventDefault()与e.stopPropagation()
kelly0721的博客
02-10 2267
事件冒泡 e.stopPropagation()阻止事件冒泡 事件冒泡，就是字元素的onClick事件被触发时，会同时触发父元素的 onClick 事件 一般来讲，click事件的顺序应该是p -> div -> body -> html -> document 所以，以下代码的触发顺序是 children -> parent -> body 如果 e.st...
jquery---6 （return false）
每天进步一点
09-11 424
Event Delegation
Js 事件传递
Shape
12-07 3276
preventDefault()、stopPropagation()、return false 之间的区别 “return false”之所以被误用的如此厉害，是因为它看起来像是完成了我们交给它的工作，浏览器不会再将我们重定向到href中的链接，表单也不会被继续提交，但这么做到底有什么不对呢？　　 可能在你刚开始学习关于jQuery事件处理时，看到的第一个例子就是关于如何阻止浏览器执行默认...
关于js里面e.preventDefault()
qaz980930841的博客
01-09 6520
定义和用法 preventDefault() 方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。 document.onclick=function(e){ e.preventDefault();      //阻止元素发生默认行为 if(e.target!=document.getElementById("myInput")){ hidePage
阻止事件e.stopPropagation()和e.preventDefault的区别
最新发布
z2000ky的博客
12-07 1843
这两个方法可以单独使用，也可以组合使用，具体取决于你的需求。用于阻止事件的传播，而。用于阻止事件的默认行为。
e.preventdefault()别滥用
webot123456的博客
04-28 712
有的时候我们会为事件回调函数添加一个参数（通常是e），并在函数中加入e.preventdefault()；以取消默认行为。由于习惯，我顺手将它写到了一个checkbox的change事件中。由于不同的浏览器解释不同，在IE8上出现了一个bug：change事件能进入，但是UI显示上不能讲复选框的选中状态重绘。 分析原因，是我的e.preventdefault()阻止了状态重绘。去掉后，就好了。 e.preventdefault()会阻止什么： checkbox 、radio的状态变化(并非所有浏览器)。 a
Dynamic CRM 2013学习笔记（二十四）页面保存前进行逻辑验证
weixin_34125592的博客
01-04 170
我们有时要验证下页面上的一些逻辑，比如开始时间不能晚于结束时间，不对时不让保存。我们可以在相关的字段事件上处理，但这如果要判断的字段比较多时，就比较麻烦了。 这时候我们就可以利用Form的OnSave事件，下面介绍下具体的做法： 1. Form的OnSave事件   2. JS方法 function formSave(context) { if (!dateChe...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值