JS中点击事件冒泡阻止

JS中点击事件冒泡阻止

解析:

一个div层'out',内含有一个div层'in'。如下:

JS中点击事件冒泡阻止

两个层都绑定了点击事件,但是点击in层的时候,点击事件会出现冒泡现象,同时也会触发out层的点击事件。

但是并不希望触发out的点击事件,只希望触发in层的点击事件,所以要阻止冒泡事件。

解决方法:

e.preventDefault()

案例代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>点击事件冒泡处理</title>
<script type="text/javascript">
var fun1 = function (e) {
alert("我是父点击事件");
}
var fun2 = function (e) {
e.stopPropagation();//阻止点击事件向上冒泡
alert("我是子点击事件");
}
</script>
</head>
<body>
<div onclick="fun1(event)" style="height:100px;background-color:black;color:white;text-align:center;border:1px solid red">
父节点
<div onclick="fun2(event)" style="margin-top:20px;border:1px solid red;height:30px">
子节点
</div>
</div>
</body>
</html>

参考自:https://www.cnblogs.com/mdorg/p/5617408.html

    http://blog.csdn.net/abb_chen/article/details/49406649

上一篇:【HDU 4722】 Good Numbers


下一篇:设置line-height:1.5和line-height:150%或者line-height:150px的区别