Question

我有一个输入和一个按钮。我想要以下行为： 1.当离开输入焦点时（发生模糊事件时），我只想在按下按钮导致“发生模糊”时才执行某些功能。换句话说，在“模糊”中，我想知道接下来将重点关注什么。如果是按钮，那么我知道用户按下了按钮，我需要做些事情。如果用户只是单击了鼠标，我什么也不想做。

这就是我所做的：

<td class='bid-floor-col' >
    <input  type='text' class='bid-floor-input display-none' data-id='<%=ads.id %>' value='<%= display_price_floor(ads) %>' orig_value='<%= display_price_floor(ads) %>'/>
    <button class='bid-floor-save display-none' data-id='<%=ads.id %>'>save</button>
</td>

javascript交互如下：

$(document).ready(function(){
    $('.bid-floor-input').on('blur', function()  {
        var id = $(this).data('id');
        $('.bid-floor-input[data-id=' + id + ']').addClass('display-none');
        $('.bid-floor-save[data-id=' + id + ']').queue(function (next) {
          $(this).addClass('display-none');
        })
        $('.bid-floor-renderer[data-id=' + id + ']').removeClass('display-none');
    });
    $('.bid-floor-save').on('click', function()  {
        var id = $(this).data('id');
        $('.bid-floor-save[data-id=' + id + ']').clearQueue();
        console.log('saving id ' + id);
    });
});

基本上，在“模糊”状态下，使按钮不可见并有延迟。如果按钮在这段时间内获得焦点，它将清除其队列，从而使其保持可见状态。

Answer 1

尝试使用activeElement

document.getElementById('test').addEventListener('blur', function(e) {
  setTimeout(() => {
    console.log(document.activeElement)
  }, 500)
})

<div>
  <input type='text' id='test'>
  <button type="button">Click</button>
</div>

Answer 2

您可以使用event.relatedTarget获取事件目标的焦点。

<input type="text">
<button id="btn">Button</button>
<script>
var input = document.querySelector('input');
var button = document.querySelector('button');
button.addEventListener("click", function(e){
  console.log("click");
  //do something here
});
input.addEventListener("blur", function(e){
    console.log(e.relatedTarget);
   if(!e.relatedTarget||e.relatedTarget.id!="btn"){
  console.log("blur");
  //do something here
  }
});

</script>

javascript上的模糊检测按钮是否被按下

2 个答案: