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

Question

我想创建一个闪烁的效果。当用户点击闪烁的元素时，它就会消失。然而，似乎并不是每个 "user's click" 都能触发 "click event"。有时，当我点击闪烁的元素时，它并没有消失。我认为原因是无法点击隐藏元素。就像这篇文章说的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

$(this).hide(); ---> $("div").hide();

Answer 2

是的，hidden/toggle 将通过设置 css display 隐藏元素。隐藏时，元素无法接收点击。您可以尝试以下方法：

改用.css('visibility','hidden|visible')。建议这样做，因为它没有改变容器大小和导致其他元素抖动的副作用。
将闪烁的元素包裹在容器元素中，而不是在容器元素上注册点击。

Answer 3

我认为这可能是您要查找的内容：$("my-element").click()

Answer 4

将闪烁的元素放在 另一个 元素中，并将处理程序放在该父元素上。此外，您可以更改闪烁元素的 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>

Answer 5

尝试使用不透明度：0|1 而不是显示：none/可见性：隐藏。关于不透明度的点击事件：0 对我有用。它对我有用。

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

JQuery: How to fire click event on hidden element?

javascript

css

jquery

visibility

display