首页 > JavaScript > event.preventDefault() vs. return false这两种停止事件传播的方法之间有什么显著区别吗?

event.preventDefault() vs. return false这两种停止事件传播的方法之间有什么显著区别吗?

上一篇 下一篇

当我想阻止其他事件处理程序在触发某个事件后执行时,我可以使用两种技术之一。我将在示例中使用 jQuery,但这也适用于普通 JS:

1.event.preventDefault()

$('a').click(function (e) {
    // custom handling here
    e.preventDefault();
});

2.return false

$('a').click(function () {
    // custom handling here
    return false;
});

这两种停止事件传播的方法之间有什么显著区别吗?

对我来说,比执行方法更简单、更短、更不容易出错。使用该方法,您必须记住正确的大小写,括号等。return false;

此外,我必须在回调中定义第一个参数才能调用该方法。也许,有一些原因让我应该避免这样做而改用?有什么更好的方法?preventDefault

分割线

网友回答:

根据我的经验,使用 event.preventDefault() 比使用 return false 至少有一个明显的优势。假设您正在捕获锚标记上的单击事件,否则,如果用户要离开当前页面,这将是一个大问题。如果单击处理程序使用 return false 来阻止浏览器导航,则解释器可能无法到达 return 语句,浏览器将继续执行锚标记的默认行为。

$('a').click(function (e) {
  // custom handling here

  // oops...runtime error...where oh where will the href take me?

  return false;
});

使用 event.preventDefault() 的好处是,您可以将其添加为处理程序中的第一行,从而保证锚点的默认行为不会触发,无论是否未到达函数的最后一行(例如运行时错误)。

$('a').click(function (e) {
  e.preventDefault();

  // custom handling here

  // oops...runtime error, but at least the user isn't navigated away.
});

分割线

网友回答:

return falsejQuery 事件处理程序中,实际上与调用两者和在传递的 jQuery.Event 对象上相同。e.preventDefaulte.stopPropagation

e.preventDefault()将阻止默认事件的发生,将防止事件冒泡,并将同时执行这两项操作。请注意,此行为与普通(非 jQuery)事件处理程序不同,在普通(非 jQuery)事件处理程序中,值得注意的是,它不会阻止事件冒泡。e.stopPropagation()return falsereturn false

来源:约翰·雷西格

使用 event.preventDefault() 而不是“return false”来取消 href 点击有什么好处吗?

分割线

网友回答:

这不是你所说的“JavaScript”问题;这是一个关于jQuery设计的问题。

jQuery和之前链接的John Resig引用(在karim79的消息中)似乎是对事件处理程序一般工作方式的误解。

事实:返回 false 的事件处理程序会阻止该事件的默认操作。它不会停止事件传播。事件处理程序一直以这种方式工作,从Netscape Navigator的旧时代开始。

返回 false 的事件处理程序内容属性和事件处理程序 IDL 属性可防止该事件处理程序的默认操作。

jQuery中发生的情况与事件处理程序中发生的情况不同。DOM 事件侦听器和 MSIE“附加”事件完全是另一回事。

有关进一步阅读,请参阅 [[W3C DOM 2 事件文档]][1]。

模板简介:该模板名称为【event.preventDefault() vs. return false这两种停止事件传播的方法之间有什么显著区别吗?】,大小是暂无信息,文档格式为.编程语言,推荐使用Sublime/Dreamweaver/HBuilder打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【JavaScript】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 208次
  • 使用软件 Sublime/Dreamweaver/HBuilder
  • 文件格式 编程语言
  • 文件大小 暂无信息
  • 上传时间 02-21
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信文章 html5 响应式 微信素材 单页式简历模板 微信模板 微信图片 企业网站 微信公众平台 自适应
您可能会喜欢的其他模板