jquery 锚点消失，因此onClick事件在淡出时不会发生

j13ufse2 于 2023-08-04 发布在 jQuery

关注(0)|答案(1)|浏览(104)

我有一个锚点（<a>），它只在<input />被聚焦时出现。当<input />模糊时，锚的容器将淡出。
我试图单击锚点来触发它的onClick()事件，但在我单击的那一刻，焦点从输入中改变了，锚点的容器消失了。我相信这就是为什么当我点击锚点时什么也没发生。
如果刚刚点击了锚点，导致焦点从<input />改变并导致模糊事件，我如何检查<input />的模糊事件？
然后，如果模糊事件发生是因为我点击了锚点，我可以触发onClick()，如果没有，我可以淡出锚点的容器。
我该如何使用JavaScript / jQuery？

更新：

我正在尝试用JavaScript做以下事情：
在输入模糊时，如果.ss-result a没有被点击，则淡出，否则alert（“.ss-result a clicked！“）;
下面是我试图实现这一点的代码，但它打破了我对<input />焦点的锚点的淡入。我没有收到任何控制台错误。

var inputObj = $('input');
var boxObj = $('.container');
inputObj.blur(function() {
    if($('.ss-result a').is(':focus')){
        alert(".ss-result a clicked!");)
    }
    else{
        boxObj.fadeOut(100);
    }
});

字符串

jquery

来源：https://stackoverflow.com/questions/17195426/anchor-disappears-so-onclick-event-doesnt-happen-as-it-is-faded-out

1条答案

按热度按时间

du7egjpx1#

CSS伪类“：focus-within”

我建议在父元素中使用“：focus-within”伪类，而不是使用JQuery，这样复选框就可以保持可见，直到用户与外部元素交互。

<style>
   .checkbox {
      display: none; /* You can replace this with "visibility: hidden" */
   }
   .container:focus-within > .checkbox {
      display: block; /* And this with "visibility: visible" */
   }
</style>

<div class="container">
   <input type="text">
   <input type="checkbox" class="checkbox">
</div>

字符串

添加转场

您还可以添加过渡以使其淡出。您应该将不透明度设置为0，将可见性设置为隐藏作为默认状态，并在用户每次聚焦容器时更改它：

.checkbox, .checkboxLabel {
  visibility: hidden;
  opacity: 0;
  transition: ease-in-out 0.2s;
}

div:focus-within>* {
  visibility: visible;
  opacity: 1;
}

<div class="container">
  <input type="text"><br>
  <label for="mycheck" class="checkboxLabel">Checkbox:</label>
  <input type="checkbox" class="checkbox" id="mycheck">
</div>

的数据

赞(0）回复(0）举报 2023-08-04

我来回答

jquery 锚点消失，因此onClick事件在淡出时不会发生

1条答案

CSS伪类“：focus-within”

添加转场

相关问题

热门标签

最新问答