javascript - JQuery:如何触发隐藏元素上的点击事件？

Question

我想创建一个闪烁的效果。当用户点击闪烁的元素时，它就会消失。然而，似乎并不是每个“用户的点击”都能触发“点击事件”。有时，当我单击闪烁的元素时，它并没有消失。我认为原因是隐藏元素无法点击。就像这篇文章说的CSS: Is a hidden object clickable? 。那么，有没有其他方法可以让用户点击元素时闪烁的元素立即消失呢？

var flashToggle = setInterval(function() {
  $("div").toggle();
}, 200)

$("div").on("click", function(e) {
  clearInterval(flashToggle);
  $(this).hide();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>Flashing element</div>

Answer 1

将闪烁元素放入另一个元素中，并将处理程序放在该父元素上。另外，您可以更改闪烁元素的 visibility 属性，而不是闪烁元素的 display，这样它就不会每次都更改页面的布局出现或消失。

const child = $('#child');
let visible = true;
var flashToggle = setInterval(function() {
  visible = !visible;
  child.css('visibility',
    visible
    ? 'visible'
    : 'hidden'
  );
}, 500)

$("#container").on("click", function(e) {
  clearInterval(flashToggle);
  $(this).hide();
})

div {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
  <div id="child">Flashing element</div>
</div>