javascript - HTML - 来自一个 div 的子元素覆盖另一个 div

Question

我在 HTML 页面中有两个连续的 div

第一个 div 包含子级 span，它在 position 中是relative。这就是它出现在第二个 div 上的原因。

我有一个与两个 div 关联的点击事件。

当我点击第二个 div 上的 span 部分时，它会触发第一个 div 的 点击事件，但我想在这里触发第二个 div 的 点击事件。

有什么办法可以实现吗

function div1Clicked() {
  alert('div 1 clicked');
}

function div2Clicked() {
  alert('div 2 clicked');
}

#div1 {
  border: 1px solid gainsboro;
  height: 100px;
  width: 13%;
  background: red;
  display: inline;
  float: left;
}

#div1 span {
  width: 316px;
  height: 30px;
  background: green;
  float: left;
  margin-top: 39px;
  position: relative;
}

#div2 {
  border: 1px solid gainsboro;
  height: 100px;
  width: 13%;
  background: red;
  display: inherit;
  float: left;
}

<div onclick="div1Clicked()" id="div1">
  <span>
    </span>
</div>

<div onclick="div2Clicked()" id="div2">
  <div>
  </div>
</div>

Answer 1

如果您不需要在子跨度上有任何悬停状态，您可以这样做。请记住，这与您的 html 有点不同，但它可以很容易地转换为您的 html/css，我只是现在没有时间去做。

你所做的是在两个具有更高 z-index 的 div 上添加 :after，这将覆盖 span 并作为为你的 javascript 触发区域。不要介意我的“奇怪的 css”，它是 BEM。您可以使用您的 javascript 触发器，它会很好地工作。如果您不熟悉所选浏览器中的开发工具，则可以使用 alert() 而不是 console.log()。

DEMO

<div class="block">
  <div class="block__column block__column--left js-action-1"></div>
  <div class="block__column block__column--right js-action-2"></div>

   <div class="block__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, voluptas!</div>
</div>


.block {
  display: flex;
  position: relative;
}

.block__column {
  width: 50%;
  height: 20rem;
  position: relative;
}

.block__column:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.block__column:hover {
  cursor: pointer;
}

.block__column--left {
  background-color: deepskyblue;
}

.block__column--right {
  background-color: deeppink;
}

.block__description {
  position: absolute;
  top: 50%;
  left: 2rem;
  right: 2rem;
  background-color: white;
}


$('.js-action-1').on('click', function() {
 console.log('clicked the left column');
});

$('.js-action-2').on('click', function() {
 console.log('clicked the right column');
});