多个具有点击事件的DOM嵌套

2016-07-01

tr中签到链接

由于tr具有点击时间，而超链接也可以被点击，所以就造成用户一次操作执行了两个时间，这是一个典型的事件嵌套问题，解决方法是 由于事件是通过冒泡顺序传递的 只需要在合适的地方阻止冒泡，就可以控制执行的步骤

一个例子

写三个具有click事件的div进行嵌套

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
  </head>
<body>
  <div id="divOne" onclick="alert('我是最外层');">
    <div id="divTwo" onclick="alert('我是中间层！')">
      <a id="hr_three" href="http://www.baidu.com" mce_href="http://www.baidu.com" onclick="alert('我是最里层！')">点击我</a>
    </div>
  </div>
</body>
</html>

通过阻止冒泡停止事件传播

停止冒泡的函数为 stopPropagation(),需要通过回调函数传入事件event

事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转）

<body>
  ...
  <script type="text/javascript">
    $(function(){
      $("#hr_three").click(function(event){
        event.stopPropagation();
      });
    });
  </script>
</body>

通过return false停止事件传播

事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转）

<body>
  ...
  <script type="text/javascript">
    $(function(){
      $("#hr_three").click(function(event){
        return false;
      });
    });
  </script>
</body>

可以不可以不阻止事件冒泡但是阻止默认行为呢

事件的回调函数中有一个

1	event.preventDefault();

如果把它放在头部A标签的click事件中，点击“点击我”。

会发现它依次弹出：我是最里层—->我是中间层—->我是最外层 但最后却没有跳转到百度

它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）