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

是的，隐藏/切换将通过设置css display隐藏元素。隐藏后，元素将无法获得点击。您可以尝试以下操作：

改为使用.css('visibility','hidden|visible')。建议这样做，因为它不会产生更改容器大小并引起其他元素抖动的副作用。
将闪烁的元素包装在容器元素中，而不是在容器元素上注册点击。

Answer 2

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

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

Answer 4

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

Answer 5

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

jQuery：如何在隐藏元素上触发click事件？

5 个答案: