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

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

一.event.preventDefault() 

        阻止元素的默认事件。如:a元素的点击跳转的默认事件 ，button，radio等表单元素的默认事件 ，div 元素没有默认事件;

例:

下方为html代码:

百度

具体处理方式如下:

参考链接:

jQuery 事件 - preventDefault() 方法

二.event.stopPropagation()

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

例:

下方为html代码:

   

     

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中添加参数如下:

参考链接:

stopPropagation() 方法

希望这篇文章能帮到大家, 谢谢;