JavaScript return false 不能阻止事件冒泡

快乐打工仔 分类:实例代码

一个需要特别注意的问题是,尽管 jQuery 的 return false 能够阻止事件冒泡。

但是原生 JavaScript 的 return false 并不具备此能力。

先来看一段 jQuery 的代码实例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
a {
  text-decoration: none;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
window.onload=function(){
  $("#mytest").click(function () {
    alert("我是子元素")
    return false
  })
  $("#parent").click(function () {
    alert("我是父元素")
  })
}
  </script>
</head>
<body>
<div id="parent">
  <div style="text-align:center">
    <a href="#" id="mytest">点击弹出提示</a>
  </div>
</div>
</body>
</html>

上面的代码使用return false可以阻止事件冒泡,但是改成原生javascript就不能。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
a {
  text-decoration: none;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
window.onload=function(){
  document.getElementById("mytest").onclick=function(){
    alert("我是子元素");
    return false
  }
  document.getElementById("parent").onclick=function(){
    alert("我是父元素");
  }
}
  </script>
</head>
<body>
<div id="parent">
  <div style="text-align:center">
    <a href="#" id="mytest">点击弹出提示</a>
  </div>
</div>
</body>
</html>

上面的代码则无法阻止事件冒泡现象,所以大家不要弄混乱了。

JavaScript return false 不能阻止事件冒泡,这样的场景在实际项目中还是用的比较多的,关于JavaScript return false 不能阻止事件冒泡就介绍到这了。

JavaScript return false 不能阻止事件冒泡属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容