javascript - 相邻div触发点击事件
本文介绍了javascript - 相邻div触发点击事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
vertical-align: middle;
}
#div-1 {
position: fixed;
color: #fff;
background-color: #333;
height: 100%;
width: 100%;
}
#div-2 {
position: absolute;
height: 30%;
width: 100%;
top: 50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
text-align: center;
background-color: #BEEBFF;
opacity: 0.5;
}
</style>
</head>
<body>
<div id="div-1">
POSITION:FIXED
</div>
<div id="div-2">
<h1>CLICK ME</h1>
</div>
<script>
var div_1 = document.querySelector('#div-1');
div_1.addEventListener('click', () => {
alert(1);
});
</script>
</body>
</html>
需求
div-2存在其他input等标签, div-1作为背景position:fixed, div-1和div-2并不是父子节点的关系.
想问的问题
想要保证每一次点击(包括在div-2)上, 都能触发div-2的点击事件, 知道事件冒泡, 这个又有点不一样. 请问一下有没有这样的实现方案..
Other
改了需求的话使div-2嵌套在div-1内, 这样的话利用事件捕获可以解决这个问题.
div_1.addEventListener('click', () => {
alert(1);
}, true);不过还是想问一下不改需求能不能实现这个功能...
解决方案
1.可以给div1和div2设置一个共通的属性，比如data-clickType="aaa"，然后绑定的时候$('[data-click="aaa"]').on
2.如果你div1和div2绑定的事件在设计时要求不是必须阻止冒泡的话，可以给div1和div2的父级绑定事件，判断e.target是否等于div1，是的话触发div2的click，如果要求必须阻止冒泡的话，可以按楼上'海岛心hey'给出的方案
这篇关于javascript - 相邻div触发点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
