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>