JQuery：如何在隐藏元素上触发点击事件？答案

【问题标题】：JQuery: How to fire click event on hidden element?JQuery：如何在隐藏元素上触发点击事件？
【发布时间】：2018-12-24 14:41:51
【问题描述】：

我想创建一个闪烁的效果。当用户点击闪烁的元素时，它会消失。但是，似乎并非每个“用户的点击”都能触发“点击事件”。有时，当我单击闪烁的元素时，它并没有消失。我认为原因是无法点击隐藏元素。就像这篇文章说的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>

【问题讨论】：

标签： javascript jquery css visibility display

【解决方案1】：

尝试使用 opacity : 0|1 而不是 display: none / visibility: hidden。关于 opacity: 0 的点击事件对我有用。它对我有用。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

我认为这可能是您正在寻找的：$("my-element").click()

【讨论】：

如果我理解得很好，他的问题是关于这对隐藏元素不起作用

【解决方案4】：

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

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

【讨论】：

非常感谢。虽然方法一不行（可见性：隐藏元素也不能触发点击事件），但方法二可以立即移除闪烁的元素！

【解决方案5】：

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

【讨论】：