preventDefault,stopPropagation,return false三者的区别

时间 2019-12-04

标签 preventdefault stoppropagation return false 区别繁體版

原文原文链接

逛帖子的时候看到道友发的前端面试题，html

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的升级版，除了阻止冒泡，还能阻止结束掉当前对象未执行的其它绑定事件方法。学习

jQuery中一个对象能够绑定多个事件方法，执行顺序会按照绑定的前后顺序来执行网站

<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”作的事情不单单只是阻止默认行为code

当调用“return false”时，它执行了如下三件事情htm

event.preventDefault()

event.stopPropagation()

中止回调函数执行并当即返回

1，2点还好理解，那么第3点是怎么回事？
return语句会终止函数的执行并返回函数的值。因此无论是否返回false或是其它值，return语句后面的代码都不会执行。而返回false，使它具有了preventDefault和stropPropagation的功能

$('a').click(function(){
    return false; // return false直接返回了，并不会执行alert
    alert('我没有被弹出来');
})

// preventDefault 和 stopPropagation 并不会阻止回调函数的执行

总结

不少jQuery教程在代码演示中用“return false”来阻止执行浏览器的默认行为。
长此以往，不少同窗习惯滥用“return false”来代替preventDefault

大多数状况下，咱们仅仅是想要它执行跟preventDefault的功能而已，但它却自做主张地帮你执行了另外两步操做。
比较好的编程习惯是，须要用到该事件方法再去调用，不然应该避免冗余事件的执行。
就像prevnetDefault完成它该有的工做，并不会阻止父节点继续处理事件，使得代码更加灵活，更易于维护。

平常开发中仍是要慎用“return false”，除非你同时须要preventDefault和stopPropagation，而且肯定你的回调函数执行完成后调用，那么你可使用“return false”，不然仍是用preventDefault 或 stopPropagation 更好些。

做者：以乐之名
本文原创，有不当的地方欢迎指出。转载请指明出处。

参考文章：《preventDefault()、stopPropagation()、return false 之间的区别》