可以在绝对堆叠的元素上触发单击事件吗?

can a click event be triggered on absolutely stacked elements?

本文关键字：单击 事件 元素      更新时间：2023-09-26

我有一个点击事件触发。它工作得很好，做了我需要它做的事情。问题在这里

我正在构建的小部件的本质是通过position: absolute堆叠元素在彼此之上。当我点击这些堆叠元素中的一个时，只有一个事件被触发，但我希望每个元素都在点击鼠标光标下被触发。有办法做到这一点吗?

请查看演示或在整个页面中运行代码片段，并单击所有div以查看结果消息。

演示:

http://plnkr.co/edit/KRWvLmRhGbO200pFkOxL?p =

预览

我在这里做的是:

隐藏顶部元素

和

得到下一个绝对元素与document.elementFromPoint的坐标，然后重复。

堆栈片段:

jQuery(document).ready(function(){
    $common = $("div.common").on('click.passThrough', function (e, ee) {
      var $element = $(this).hide();
      try {
        if (!ee) $("#output").empty();
        $("<div/>").append('You have clicked on: '+$element.text()).appendTo($("#output"));
        ee = ee || {
          pageX: e.pageX,
          pageY: e.pageY
        };
        var next = document.elementFromPoint(ee.pageX, ee.pageY);
        next = (next.nodeType == 3) ? next.parentNode : next //Opera
        $(next).trigger('click.passThrough', ee);
      } catch (err) {
        console.log("click.passThrough failed: " + err.message);
      } finally {
        $element.show();
      }
    });
    
    $common.css({'backgroundColor':'rgba(0,0,0,0.2)'});
});
#output {
  margin-bottom: 30px;
}
.common {
  position: absolute;
  height: 300px;
  width: 300px;
  padding: 3px; 
  border: 1px #000 solid;
}
.elem5 {
  top: 150px;
  left: 150px;
}
.elem4 {
  top: 180px;
  left: 180px;
}
.elem3 {
  top: 210px;
  left: 210px;
}
.elem2 {
  top: 240px;
  left: 240px;
}
.elem1 {
  top: 270px;
  left: 270px;
}
<script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<div id="output"></div>
<div class="common elem1">Top Most Element</div>
<div class="common elem2">Element 2</div>
<div class="common elem3">Element 3</div>
<div class="common elem4">Element 4</div>
<div class="common elem5">Bottom Element</div>

出处:

http://jsfiddle.net/E9zTs/2/

您可以使用customEvent属性

  • 将所有div放到父div中
  • 为父div添加一个click处理程序
  • 如果在父框中有一个点击，确定这个点击是否在任何子框中
  • 如果为真。然后发送一个点击事件到所有子框

    片段

    //This function changes the color of all child divs
function changeColor(e) {
  this.style.background = "red";
}
//this function is attached to the parent div which will send that click event to all divs
function trigger(e) {
  //create an event
  event = new CustomEvent('click');
  //if the event originates from a child div
  if (e.target.className == 'box')
  //loop through all child div
    for (var i = 0; i < all_box.length; ++i) {
    //dispatch a click event to each child div
    all_box[i].dispatchEvent(event);
  }
}
document.getElementById('parent').addEventListener('click', trigger)
var all_box = document.getElementsByClassName('box');
for (var i = 0; i < all_box.length; ++i) {
  all_box[i].addEventListener('click', changeColor)
}
    .box {
  padding: 10px;
  display: inline-block;
  border: solid black;
}
#parent {
  border: solid black;
  padding: 10px;
}
    ;
<div id="parent">
  <div class="box" id="primary">box1</div>
  <div class="box">box2</div>
  <div class="box">box3</div>
  <div class="box">box3</div>
</div>

    • 相关文章：