写程序的时候遇到问题去搜索,有时候会看到 preventDefault()和stopPropagation()两种代码。几乎所有的文章作者则解释为:阻止默认行为/冒泡行为。但是这两句代码一直让我困惑了很久,什么算是默认行为?这两种代码有什么区别?所以这篇文章里,就算是自己研究后的一篇总结。
首先,要先了解什么是默认行为。
js中事件有自己的默认行为,例如,点击a标签就会跳转,点击表单提交则会提交,单击右键就会出现菜单。有些时候需要取消这些事件的默认行为,就用到了event.preventDefault(), 对于老的IE浏览器,则为event.returnValue = false; 但是当事件本身没有默认行为,即event.cancelable=false时,阻止是不会起作用的。
什么是冒泡行为呢?
即在某个对象上触发某个事件,事件会从发生的目标event.target开始依次向上一级标签寻找,直到document。要取消冒泡行为则用event.stopPropagation(), IE则用event.cancelBubble = true; 阻止后则只会触发自身的事件,不会再向上一级寻找。
不是所有的事件都能冒泡。如focus, blur等,这些事件仅发生在自己身上,父元素不会产生该事件。
如果想要同时阻止事件默认行为和冒泡行为,可以在事件函数中返回false来表示调用preventDefault()和stopPropagation()两个方法。
如:
$(":submit").click(function(event) {
if($(".input").val() =="") {
alert("用户名不能为空");
return false; //阻止提交按钮的默认行为(提交表单)和事件冒泡
}
})
以上~
参考:
1. http://www.jb51.net/article/42492.htm
2. http://blog.csdn.net/dzahao/article/details/52809818
网友评论