js处理手势冲突之冒泡用法

​ 嵌套的div元素，如果父级和子元素都绑定了一些事件，那么在点击最内层子元素时可能会触发父级元素的事件，下面介绍一下js阻止默认事件与js阻止事件冒泡示例.

一.event.preventDefault()

​ 阻止元素的默认事件。如:a元素的点击跳转的默认事件 ，button，radio等表单元素的默认事件 ，div 元素没有默认事件;
例:
下方为html代码:

<a link="https://www.baidu.com">百度</a>

​ 具体处理方式如下:

<script type="text/javascript">
  $(document).ready(function(){
  $("a").click(function(event){
​     event.preventDefault();
​   });
});
</script>

参考链接:
jQuery 事件 - preventDefault() 方法

二.event.stopPropagation()

​ 该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。
例:
​ 下方为html代码:

 <div click="outsideDivAction()" style="background:blue;">
​    <div click="insideDivAction()" style="background:red;">
​     </div>
</div>

​ js中代码如下:

  $scope.outsideDivAction = function(){
​     console.log("外面div方法执行");
};
  $scope.insideDivAction = function(){
​      console.log("里面div方法执行");
};

​ 执行上方代码发现, 点击里面的div, 外面的方法也会执行; 往往在实际工程中, 需要屏蔽外面的方法, 解决代码如下:

 $scope.insideDivAction = function($event){
​       $event.stopPropagation();
​       console.log("里面div方法执行");
};

​ 本以为这样就可以了, 但是后来才发现$event其实也算一个参数, 所以得在html中传递一下;
​ html中添加参数如下:

<div click="insideDivAction($event)" style="background:red;"></div>

参考链接:
stopPropagation() 方法
希望这篇文章能帮到大家, 谢谢;