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

最新推荐文章于 2023-09-25 15:16:10 发布
最新推荐文章于 2023-09-25 15:16:10 发布
阅读量333 收藏
点赞数
分类专栏： JQUERY
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>

我们先看这段代码：

    <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();
}

蓝色水
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网页右键ie不支持event.preventDefault和event.returnValue （需要加window）
09-05
网页右键ie不支持event.preventDefault和event.returnValue （需要加window） ，需要的朋友可以参考一下
wrap-prevent-default:包装事件处理程序，以便在可用时为您提供e.preventDefault（）。 （即直接调用也可以）
05-02
包装防止默认 包装事件处理程序，以便在可用时为您提供e.preventDefault（）。 （即直接调用也可以） ...// i.e. <a>... //when it's clicked it will preventDefault() //you can also call it directly a
【JS基础】e.preventDefault() 阻止默认操作
热门推荐
Milk~每天分享一点点，技术进步一点点
08-05 3万+
阻止默认操作 默认操作 具体指的是什么呢？看如下实例： 把单击事件处理程序注册到一个锚元素，而不是一个外层的上，那么就要面对另外一个问题：当用户单击链接时，浏览器会加载一个新页面。 当用户在编辑完表单后按下回车键时，会触发表单的submit事件，在此事件发生后，表单提交才会真正发生。这种行为与我们讨论的事件处理程序不是同一个概念，它是单击标签元素的默认操作。 在这种情况下，处理方法有： 1.w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false pre
关于e.preventDefault()方法
weixin_43821171的博客
09-22 7666
背景： 同事在项目中遇到的问题，在项目中导入了某一个组件作为根组件之后，发现原来的子组件中的滚动效果不再生效，因为是移动端的项目，所以这里的滚动效果是通过touchmove事件进行触发的，在对引入的组件进行研究后，发现是在根组件中阻止了touchmove事件的默认事件，也就是调用了e.preventDefault()方法，然后同事们通过阻止冒泡阻止了这个方法的调用，解决掉了因为引入组件而带来的问题，但这却引发了一连串的有关于preventDefault()这个方法的思考。 问题： 为什么我在父组件上使用pr
chrom浏览器避免弹出“确定要离开此面吗？”提示框
weixin_30807779的博客
03-04 549
一、避免弹出提示框 在网上搜了很多，答案大都是设置window.onbeforeunload=null ，但是试用之后无效。 这个问题放了两天之后返回来再次想，终于找到了答案，在此和大家分享一下： 解除jquery离开页面弹出提（1） 先解除绑定在设置弹出内容为null。 1 $(function(){ 2 　　$(window).unbind('beforeunloa...
jquery刷新页面
Democreen
04-02 2万+
<br />下面介绍全页面刷新方法：有时候可能会用到<br />window.location.reload()刷新当前页面.<br />parent.location.reload()刷新父亲对象（用于框架）<br />opener.location.reload()刷新父窗口对象（用于单开窗口）<br />top.location.reload()刷新最顶端对象（用于多开窗口）<br />下面再介绍一些javascript基本函数 <br />1.document.write(”");为 输出语句 <b
如何使用JavaScript阻止关闭窗口
weixin_30613727的博客
11-02 604
很多时候，在浏览网页时，我们需要考虑用户不小时关闭窗口的情况，特别是当用户有很重要的数据还没有保存， 我们的程序有必要对用户进行提醒。这可以通过重写window.onbeforeunload()方法来实现，见如下例子： <script language="javascript" type="text/javascript"> window.onbef...
return false;和e.preventDefault();的区别
09-05
Have you ever seen those two things (in the title) being used in jQuery? Here is a simple
JQuery事件e参数的方法preventDefault()取消默认行为
10-26
JQuery事件的e参数的方法preventDefault()可以取消对象的默认行为，下有个不错的示例，大家可以参考下，希望对大家有所帮助
jquery 刷新页面方法和一些javascript基础函数
邢明权博客
07-15 590
<br />局部刷新： <br /><br />这个方法就多了去了，常见的有以下几种； <br /><br />$.get方法，$.post方法，$.getJson方法,$.ajax方法如下 <br /><br />前两种使用方法基本上一样 <br /><br />$.get(”Default.php”, {id:”1″, page: “2″ }, <br />function(data){ <br />//这里是回调方法。返回data数据。这里想怎么处理就怎么处理了。 <br />}); <br /><b
onbeforeunload与a标签在IE中的冲突bug
lingxyd 的专栏
01-14 2848
onbeforeunload与a标签在IE中的冲突bug   onbeforeunload 是window的一个事件，目前Firefox，IE都支持，主要用来提示用户是否真的要离开该页面，通常在一些比较重要的数据提交之前，防止用户误操作导致数据丢失。典型的应用如gmail中，在写邮件的时候，如果刷新页面或者关闭页面，会出现提示。 但是在IE下点击一些a标签时，也会触发onbefo
html阻止自动刷新,使用onbeforeunload阻止用户刷新
weixin_39617318的博客
06-05 1308
1、onbeforeunload是什么玩意儿onbeforeunload是一个事件，当页面将要被卸载(更新)的时候会被触发。卸载(更新)讲的就是unload事件，当页面关闭后,会触发。2、语法规则window.onbeforeunload = funcReffuncRef指的是一个方法，也就是一个函数引用。3、怎么使用这个东西3.1在HTML中,直接挂载到body上testfunction tes...
e.preventDefault()是什么
weixin_42610010的博客
12-31 2047
e.preventDefault() 是一个 JavaScript 函数，它可以阻止浏览器的默认行为。例如，当你点击一个超链接时，浏览器会自动跳转到超链接指向的页面，这就是浏览器的默认行为。如果你希望在点击超链接时不跳转，可以在超链接的事件处理函数中使用 e.preventDefault() 来阻止浏览器的默认行为。 例如，假设你有一个超链接： <a href="/some/page"&gt...
event.preventDefault()方法
小景的博客
08-12 8417
今天看到这个方法，因为之前没有接触过，就随手记录一下，希望以后可以用到。 event.preventDefault()方法是用于取消事件的默认行为，例如，当点击提交按钮时阻止对表单的提交。但此方法并不被ie支持，在ie下需要用window.event.returnValue = false; 来实现。 其实就是用来取消时间的默认动作。 注意 1、如果 Event 对象的 c
e.preventDefault()阻止默认行为
最新发布
czlj1998的博客
09-25 859
因此，通过在输入框的onKeyUp事件中检查keyCode是否为13（回车键的keyCode为13），如果是，则使用preventDefault()方法阻止默认行为，即阻止表单提交。例如，你可以在按下回车键时阻止表单的默认提交行为，或者在按下空格键时阻止滚动页面的默认行为。，可以阻止链接的默认跳转行为，从而允许你在点击链接时执行自定义操作，比如打开一个模态框或执行一些其他逻辑。按钮点击：在处理按钮点击事件时，有时你可能希望阻止按钮的默认提交行为或页面刷新行为。表单提交：在处理表单提交事件时，通过调用。
Event事件-1:addEventListener事件监听 / 事件冒泡事件捕获 / 事件委托 / preventDefault 阻止默认行为 / cancelBubble、stopPropa...
kino2046的博客
03-17 1163
addEventListener 事件监听器 target.addEventListener(type,listener[,options|useCapture])添加事件监听 参数： type事件类型(click、mouseover等，注意这里不加on) listener事件处理函数 可选参数： options配置对象...
jQuery的return false
learninginJAVA的专栏
04-04 605
测试return false的作用 $(document).ready(function () { $("#box").on("click", ".btn", function (event) { $(".text").toggle(); event.preventDefault(); //这里是用来阻止标签的默认打开链接事件，要是不加这句，默认打开链接，当href
js e.stopPropagation()阻止冒泡事件和e.preventDefault()阻止默认行为的应用场景
PrimaryColor
01-27 2643
一、阻止冒泡事件。 示例图： 通常，在很多用户界面中，都经常出现如上图所示，点击列表的时候，进入这条数据的详情页面，点击编辑的时候，弹窗编辑这条数据的信息。但是呢，做完之后，发现点击编辑的时候不仅仅会打开弹窗并且还会跳转页面，也就是两个事件都触发了，这个时候我们就需要在点击编辑的时候，阻止事件继续往上派发。 代码： $('.toDetail').on('click',function(){ console.log('跳转详情页面'); }); $('.editDetail').on('
jquery---6 （return false）
每天进步一点
09-11 391
Event Delegation
没有e.preventDefault();方法
07-11
确实在 Echarts 的鼠标滚动事件中没有提供 `e.preventDefault()` 方法来阻止默认的滚动行为。 为了解决这个问题，你可以使用 `e.event.preventDefault()` 来阻止默认的滚动行为。具体步骤如下： ```javascript ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值