阻止默认和冒泡事件，认清event.preventDefault()、event.stopPropagation()和return false区别

最新推荐文章于 2022-01-27 15:08:05 发布

原创最新推荐文章于 2022-01-27 15:08:05 发布 · 782 阅读

2 ·

CC 4.0 BY-SA版权

实用同时被 3 个专栏收录

738 篇文章

订阅专栏

JavaScript

311 篇文章

订阅专栏

205 篇文章

订阅专栏

本文详细介绍了JavaScript中的事件处理方法，包括preventDefault()用于阻止默认事件的行为，stopPropagation()用于阻止事件冒泡，以及returnfalse同时阻止默认事件和事件冒泡的情况。通过具体的HTML和JavaScript示例，展示了不同场景下如何应用这些事件处理技术。

参考资料：
1、js中的preventDefault与stopPropagation详解
3、关于js中return false、event.preventDefault()和event.stopPropagation()

一、preventDefault() 阻止默认事件执行

<script type="text/javascript">
  // 阻止默认事件执行
  function stopDefault(e) {
    if (e && e.preventDefault) {
      e.preventDefault();
    } else {
      window.event.returnValue = false;
    }
   
   //return false;   //这句同时阻止默认事件和事件冒泡(限用jQuery绑定)
  }
</script>

<a href="http://www.baidu.com" id="testLink">百度</a>
<script type="text/javascript">
  var test = document.getElementById("testLink");
  test.onclick = function(e) {
    alert("我的链接地址是：" + this.href + ", 但是我不会跳转。");
  
    stopDefault(e); // 阻止默认事件执行
  };
</script>

二、stopPropagation() 阻止事件冒泡

<script>
  // 阻止事件冒泡
  function doSomething(obj, evt) {
    alert(obj.id);
  
    var e = evt ? evt : window.event;
    if (window.event) {
      e.cancelBubble = true; // ie下阻止冒泡
    } else {
      e.stopPropagation();  // 其它浏览器下阻止冒泡
    }
  }
</script>

<div id="parent1" onclick="alert(this.id)" style="width:250px;background-color:yellow">
  <p>This is parent1 div.</p>
  <div id="child1" onclick="alert(this.id)" style="width:200px;background-color:orange">
    <p>This is child1(事件冒泡).</p>
  </div>
  <p>This is parent1 div.</p>
</div>
<br />
<div id="parent2" onclick="alert(this.id)" style="width:250px;background-color:cyan;">
  <p>This is parent2 div.</p>
  <div id="child2" onclick="doSomething(this,event);" style="width:200px;background-color:lightblue;">
    <p>This is child2(事件不冒泡).</p>
  </div>
  <p>This is parent2 div.</p>
</div>

三、return false 阻止默认和冒泡事件

HTML

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

<div id="parent3" onclick="alert(this.id)" style="width:250px;background-color:cyan; width: 400px;">
  <a href="http://www.baidu.com" id="testLink1">1.百度(默认事件，冒泡)</a>
  <br/>
  <br/>
  <a href="http://www.baidu.com" id="testLink2">2.百度(阻止事件，冒泡)</a>
  <br/>
  <br/>
  <a href="http://www.baidu.com" id="testLink3">3.百度(阻止事件, 阻止冒泡) （return false）</a>
  <br/>
  <br/>
  <a href="http://www.baidu.com" id="testLink4">4.百度(阻止事件, 阻止冒泡) (常规方法)</a>  
</div>

//js 绑定：阻止事件，但会冒泡。
var test = document.getElementById("testLink2");
test.onclick = function(e) {
  alert("我的链接地址是：" + this.href + ", 但是我不会跳转, 会冒泡。");
  return false;
};

//jQuery绑定：阻止事件，阻止冒泡。 (注意：“限jQuery 绑定事件”）
$("#testLink3").click(function() {
  alert("我的链接地址是：" + this.href + ", 但是我不会跳转, 也不冒泡。");
  return false;
});

//阻止事件，阻止冒泡。 (常规方法）
var test4 = document.getElementById("testLink4");
test4.onclick = function(e) {
// 或 用jQuery绑定
//$("#testLink4").click(function(e) {
  alert("我的链接地址是：" + this.href + ", 但是我不会跳转, 也不冒泡。");

  // 阻止事件
  if (e && e.preventDefault) {
    e.preventDefault();
  } else {
    window.event.returnValue = false;
  }

  // 阻止冒泡
  if (e && e.stopPropagation) {
    e.stopPropagation(); // 其它浏览器下阻止冒泡
  } else {
    window.event.cancelBubble = true; // ie下阻止冒泡
  }
});

注意：

使用return false 这个方法比较暴力，它会同时阻止事件冒泡也会阻止默认事件。return false就等于同时调用了event.stopPropagation()和event.preventDefault()，使用起来似乎比较方便，代码简洁，但return false也是有条件限制的：
1、必须要用jQuery进行绑定；
2、据说如果用addEventListener()或者attachEvent()来绑定事件，return false阻止事件不生效，就要通用preventDefault()方法或者设置事件对象的returnValue属性来阻止；
3、H5规范中有指出在mouseover等几种特殊事件情况下，return false;并不一定能终止事件。
所以，在实际使用中，我们需要尽量避免通过return false;的方式来取消事件的默认行为。