preventDefault,stopPropagation,return false三者的区别
preventDefault(), stopPropagation(), return false三者的区别,这三者的使用想必大家并不陌生,但是细想之下还是有可究之处。
preventDefault()
阻止元素在浏览器中的默认行为
<a id="link" href="http://wuliv.com">网站</a>
$('#link').click(function(event){
event.preventDefault(); // 阻止了a链接href的访问或跳转
})
stopPropagation()
事件冒泡:当一个元素上的事件被触发时,比如鼠标点击了一个按钮,同样的事件将会在该按钮元素的所有父级/祖先元素上触发。
这一个过程就被称为事件冒泡。它是由子级元素先触发,父级元素后触发,由内而外(由下往上)的一个流程。与之顺序相反的是事件捕获。
<body>
<div id="inner">
<p>事件冒泡例子</p>
<button id="btn">我要弹个框</button>
</div>
</div>
$('#btn').click(function(event){
event.stopPropagation(); // 阻止了事件冒泡,不会触发"#inner, body"的点击事件
console.log('#btn')
})
$('#inner').click(function(event){
// #btn 阻止了冒泡,这里不会执行
// 如果不使用stopPropagation, 当#btn点击时,这里也会执行
console.log('#inner')
})
$('body').click(function(event){
// #btn 阻止了冒泡,.btn点击不会影响到我
// 如果不使用stopPropagation, 当#btn点击时,这里也会执行
console.log('body')
})
// 使用了stopPropagation()输出
'#btn'
// 不使用stopPropagation()输出
'#btn'
'#inner'
'body'
stopImmediatePropagation()
阻止对象绑定的剩余的事件处理函数方法的执行,并阻止当前事件的冒泡。
可以理解为stopImmediatePropagation是stopPropagation的升级版,除了阻止冒泡,还能阻止结束掉当前对象未执行的其它绑定事件方法。
<body>
<div id="inner">
<p>stopImmediatePropagation()例子</p>
<button id="btn">按钮</btn>
</div>
</body>
$('body').click(function(event){
// body 点击
console.log('body');
});
$('#inner').click(function(event){
// #inner 点击
console.log('#inner');
})
$('#btn').click(function(event){
// 第一个#btn点击
e.stopImmediatePropagation();
console.log('#btn 1');
})
$('#btn').click(function(event){
// 第二个#btn点击
console.log('#btn 2')
})
// 最终输出
'#btn 1' // (因为stopImmediatePropagation阻止了#btn绑定的剩余未执行的事件方法,并且阻止了冒泡)
// 如果不使用stopImmediatePropagation, 将输出
'#btn 1'
'#btn 2'
'#inner'
'body'
同个对象执行顺序按绑定顺序执行,冒泡则由内向外执行
return false
“return false” 相信不少同学会用来阻止元素在浏览器中的默认行为,
拿它当preventDefault()使用,但其实“return false”做的事情不仅仅只是阻止默认行为
当调用“return false”时,它执行了以下三件事情
event.preventDefault() event.stopPropagation() 停止回调函数执行并立即返回
1,2点还好理解,那么第3点是怎么回事?
return语句会终止函数的执行并返回函数的值。
所以不管是否返回false或是其它值,return语句后面的代码都不会执行。
而返回false,使它具备了preventDefault和stropPropagation的功能
$('a').click(function(){
return false; // return false直接返回了,并不会执行alert
alert('我没有被弹出来');
})
// preventDefault 和 stopPropagation 并不会阻止回调函数的执行