jQuery中的事件处理:return false、阻止默认行为、阻止冒泡以及兼容性问题

转自:http://wyqbailey.diandian.com/post/2012-07-12/40030551971

return false

在jQuery中,我们常用return false来阻止浏览器的默认行为,那”return false“到底做了什么?

当你每次调用”return false“的时候,它实际上做了3件事情:

  • event.preventDefault();
  • event.stopPropagation();
  • 停止回调函数执行并立即返回。

对,你没看错,return false确实做了这么多操作。它之所以被一再无误用,是因为使用它后看起来像是完成了我们的阻止任务,并且语句也很简单。

这3件事中用来阻止浏览器继续执行默认行为的只有preventDefault,除非你想要停止事件冒泡,否则使用return false会为你的代码埋下很大的隐患。

preventDefault()

大多数情况下,当你使用return false时,你其实真正需要的是e.preventDefault()。要使用e.preventDefault,你需要确保你传递了event参数到你的回掉函数中。它会替我们完成所有工作,但不会阻止父节点继续处理事件,要记住,你放在代码中的限制越少,你的代码就越灵活,也就越易于维护。

但在使用中你会发现preventDefault有兼容性问题,老版本的IE并不理会这个方法,依然我行我素,此时我们需要一点兼容代码来搞定IE:

window.event.returnValue=  false;//返回值设为false
       window.event.keyCode = 0;//如果你想阻止键盘的默认行为,如F5,则这句也是需要的

stopPropagation()

有些情况下,你有可能需要停止事件冒泡,直接使用stopPropagation即可。

stopImmediatePropagation()

这个方法会停止对象上相关事件的继续执行,即使当前的对象上还绑定了其它处理函数。有时你的代码非常复杂,不同的widgets和plugin就有可能在同一个对象上添加事件,如果遇到这种情况,那你就很有必要理解和使用stopImmediatePropagation。

时间: 2024-08-11 03:35:14

jQuery中的事件处理:return false、阻止默认行为、阻止冒泡以及兼容性问题的相关文章

一步一步学习 JQuery (七) JQuery 中的事件处理

一.加载 DOM  在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中, 通常使用 window.onload 方法, 在 jQuery 中使用$(document).ready() 方法. <span style="font-size:14px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://w

原生js中stopPropagation,preventDefault,return false的区别

1.stopPropagation:阻止事件的冒泡,但不阻止事件的默认行为. 最好莫过于用例子说明: <div id='div'  onclick='alert("div");'>    <ul  onclick='alert("ul");'>        <li id='ul-a' onclick='alert("li");'><a href="http://www.baidu.com&qu

javascript, jQuery阻止默认事件和冒泡事件

事件冒泡(event bubbling) 事件冒泡是指一个元素上的事件被触发,然后这个事件按嵌套顺序在父级元素上触发,直至document根节点. 例如: <!DOCTYPE html> <html> <head> <title>Event Bubbling Example</title> </head> <body> <div id="myDiv">Click Me</div>

jquery中ajax用return来返回值无效

jquery中,ajax返回值,有三种写法,只有其中一种是成功的 /** * async:false,同步调用 * 返回1:2 * 失败 * 分析:ajax内部是一个或多个定义的函数,ajax中return返回值,返回到ajax定义函数,而不是ajax外层的函数 */ function checkAccount1(){ var result = "1:2"; $.ajax({ url : path+'/user/checkAccount.do', type : "post&q

jquery中each使用return无效

今天使用jquery的each遍历的使用,发现使用return之后,程序不会停止执行,而是会继续往下执行. 1 $.each(allTpInfo, function (index, value) { 2 if (value.username == username) { 3 return 4 } 5 }); 原来在each代码块中return false = breakreturn ture = continue在each里使用 return 给整个函数返回时,其实只是跳出each循环而已 参考

JavaScript中function 之return false的理解(实例代码)

1.司空见惯代码,在某一dom节点上注册事件方法 $("#btnResponse").click(Login); $("#txtCode").keydown(ReturnKey); 2.非常正常的Login function,只是里面用了swal插件 代码执行效果就是我要的,点击btnResponse,当满足触发条件,弹出swal提示框,非常好. function Login(e) { var loginUserId = $("#txtUserno&quo

阻止默认行为和冒泡

preventDefault方法的起什么作用呢?我们知道比如<a href="http://www.baidu.com">百度</a>,这是html中最基础的东西,起的作用就是点击百度链接到http://www.baidu.com,这是属于<a>标签的默认行为,而preventDefault方法就是可以阻止它的默认行为的发生而发生其他的事情. stopPropagation方法呢?讲stopPropagation方法之前必需先给大家讲解一下js的事件

JavaScript 阻止默认时间和冒泡时间

<!DOCTYPE HTML><html> <head> <title>event cancel</title> </head> <body> <a href="https://www.baidu.com/">baidu</a> <div style="width: 400px; height: 300px; background: red;" id=&

阻止默认行为 阻止冒泡

什么是默认行为? var a = document.getElementById('a'); a.addEventListener('click',function(e){ e.preventDefault(); },false); 兼容性问题: function preventDefault(event){ var event = $$.getEvent(event); if(event.preventDefault){ event.preventDefault(); }else{ event