相邻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.addEventListenerclick, => { alert1; }; </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.addEventListenerclick, => { alert1;
}, true;

不过还是想问一下不改需求能不能实现这个功能…

1.可以给div1和div2设置一个共通的属性,比如data-clickType=”aaa”,然后绑定的时候$[data-click=”aaa”].on

2.如果你div1和div2绑定的事件在设计时要求不是必须阻止冒泡的话,可以给div1和div2的父级绑定事件,判断e.target是否等于div1,是的话触发div2的click,如果要求必须阻止冒泡的话,可以按楼上海岛心hey给出的方案

是不是可以考虑给div-1的事件中去调用div-2的click事件

发表评论

电子邮件地址不会被公开。 必填项已用*标注