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>
参考链接:
希望这篇文章能帮到大家, 谢谢;
