在另一个元素下触发元素事件。

Question

我有一些span和一个button紧随其后。我想要做的就是隐藏span元素并在指针位于按钮位置时触发button点击事件。

但是我无法做到这一点，因为点击事件直接进入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>

- user8393506

---

如果您不是在寻找http://api.jquery.com/trigger/，请描述您在此尝试解决的实际问题。如果您完全控制两者，则将事件处理程序添加到按钮本身并通过指针事件使单击事件简单地通过span传递不应该成为问题。如果您没有完全控制，则迄今为止这太像点击劫持尝试了。 - CBroe

@CBroe 如果我添加了 pointer-events: none，那么我将无法将 mouseenter 和 mouseleave 事件附加到该 span 上，但我确实需要它们。 - user8393506

Answer 1

我终于找到了一个只使用CSS的解决方案，使用位置、透明度和 display: none; 动画。

这里发生的情况是，如果我们悬停在span上，它会消失到0不透明度，然后通过bottom: -500px移出屏幕。一旦发生这种情况，鼠标将悬停在背景上，这将调用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>

- roberrrt-s

---

今天你是真正的英雄！ - user8393506

请确保两个div的高度/宽度相等，否则可能会导致奇怪的效果。 - roberrrt-s

Answer 2

    $('#clicker').on('click', function(event) {
     alert('result');
    })

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

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

#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>

- Aliaga Aliyev

Answer 3

不要使用标签，而是使用:after伪元素来放置您的内容。这样，您就可以在不影响按钮操作的情况下隐藏它。请参考下面的代码片段。

$('#clicker').on('click', function(event) {
  alert('result');
})

  
#clicker:after {
  content: "{{property}}";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#clicker:hover:after {
  opacity: 0;
}

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

- RaJesh RiJo

Answer 4

这可以通过对您的代码进行最小修改来实现！

$('#myspan').on('mouseenter', function (event) {
    $(this).animate({ 'opacity': 0 }, 500).delay(400).queue(function (next) { 
      $(this).css('display', 'none'); 
      next(); 
    });
});

$('#clicker').on('mouseleave', function (event) {
    $('#myspan').css('display', 'block').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>

- Xpleria

Answer 5

请尝试处理按钮的鼠标悬停和离开事件，而不是像下面这样使用 span。

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

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

    });

    $('#clicker').on('click', function (event) {
        alert('result');
    })
</script>

- Jignesh Chauhan