javascript - 触发另一个元素下的元素事件

Question

所以我有一些 span 和一个 button 就在它后面。我只想隐藏 span-元素并在指针位于按钮位置时触发 button-click 事件

但我不能那样做，因为点击事件直接进入 span 事件处理程序。我尝试使用 pointer-events: none 来做到这一点，但在这种情况下，我将无法附加 mouseover 事件。

还尝试设置 CSS display: none 但在这种情况下，不会附加事件处理程序

有什么办法吗？

$('#myspan').on('mouseenter', function (event) {
        $(this).animate({ 'opacity': 0 });
    });

    $('#myspan').on('mouseleave', function (event) {
        $(this).animate({ 'opacity': 0.5 });
    });
    
    $('#clicker').on('click', function(event) {
    	alert('result');
    })

#myspan {
    position: fixed;
    font-size: 22px;
    z-index:500;
    position: fixed;
    left: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='myspan'>{{property}}</span>
<button id='clicker' style='width: 250px; height: 20px; left: 40%; z-index: -1; position: absolute'>
  Clicker
</button>

Answer 1

我终于找到了一个纯 CSS 解决方案，使用带有位置、不透明度和 display: none;

的动画

这里发生的事情是，如果我们悬停跨度，它会消失为 0 不透明度，然后移出屏幕，底部为 -500 像素。一旦发生这种情况，鼠标将悬停在背景上，这会在 span 上调用 display none。您现在可以单击元素本身。当鼠标移出按钮时，一个动画将使 span 再次出现。

#myspan {
  position: fixed;
  font-size: 22px;
  z-index: 500;
  width: 250px;
  height: 2rem;
  position: fixed;
  left: 40%;
  animation: fadeIn 1s;
  text-align: center;
}

#myspan:hover {
  opacity: 0;
  animation: fadeOut 1s;
}

div {
  display: block;
  position: fixed;
  left: 40%;
  z-index: 50;
  width: 250px;
  height: 2rem;
  text-align: center;
}

div:hover + span {
  opacity: 0;
  bottom: -500px;
  display: none;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  100% {
    bottom: -500px;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    bottom: -500px
  }
  1% {
    bottom: auto;
  }
  100% {
    opacity: 1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='clicker'>
  Clicker
</div>
<span id='myspan'>{{property}}</span>