<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>Title</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.test_div {
width: 200px;
height: 200px;
background: rgba(0, 0, 0, 0.3);
position: absolute;
left: 0;
top: 0;
display: block;
}
</style>
</head>
<body>
<div id="test" class="test_div">
<a id="test_a" href="http://www.baidu.com">百度</a>
</div>
<script type="text/javascript">
window.onload = function () {
//ps:移动端的独有。事件在pc上是没有效果的;
let div = document.getElementById("test");
let test_a = document.getElementById("test_a");
div.addEventListener("click", function () {
console.log("dian ji le");
this.style.display = "none";
});
//因为在点击a的时候,a处理完后,事件还会继续向上传递,所有要禁止到事件的冒泡;
test_a.addEventListener("click",function (ev) {
ev = ev||event;
ev.stopPropagation();
});
};
</script>
</body>
</html>