Javascript新手 - 似乎onBlur的一个元素"覆盖"另一个元素的onclick

Question

我有两个要素:

<input type="text" name="pmTo" id="pmTo" onkeyup="offerSuggs('none');" onfocus="showSelect();" onblur="hideSelect();" />

和一个动态创建的(这是自动建议程序的所有部分):

$suggString .= '<div name="'.$value.'" id="'.$value.'" class="suggMouseOver" onmouseover="highlightDivs(this);" onmouseout="blurDivs(this);" onclick="fillInput(this);">'.$value.'</div>';

好的,然后有一些事件函数对应于输入元素的onblur,然后是div元素的onclick:

function hideSelect() {
            offerSuggs('checkFinal');
            document.getElementById('nameSugg').style.display="none";
            }


function fillInput(elemName) {
            document.getElementById('pmTo').value=elemName.id;
            }

编辑:如何让onclick在他们点击的元素上正确触发而没有onblur事件隐藏div首先使onclick无意义？但是,当文本框失去焦点时,我仍然希望保留建议div消失的功能.谢谢.

Answer 1

我认为你的答案很简短,因为你的问题令人困惑.据推测,您有一个输入,当聚焦时,会根据输入到输入中的字符显示建议列表.

如果用户使用光标选择一个项目,那么我认为输入的blur事件在div的click事件之前触发,并且div在click触发之前设置为display:none,因此错过了div.

修复是在短暂超时后调用onblur监听器,因此:

  <input ... onblur="setTimeout(function(){hideSelect();}, 100);">

在许多浏览器中测试,您可能需要将超时设置为200ms左右.如果在建议消失之前模糊事件之后存在短暂的可见延迟,则无关紧要(即,有点太长比有点太短).

确保建议不会掩盖页面上的任何重要内容,否则用户可能会发现它们更多的是障碍而不是帮助.:-)

Answer 2

接受的答案将作为一个快速解决方案，但通过依赖setTimeout，您假设用户n在释放之前只会继续点击不到几毫秒（只是想象某人在点击时犹豫不决）。为了更确定点击会通过，您可以设置更长的超时时间，但这意味着您的可隐藏元素在模糊后将保持可见更长时间。

那么让我们来看看问题的根源。

点击事件未能通过是按以下顺序触发事件的结果：

1. mousedown
2. blur
3. mouseup
4. click

所以当 mouseup/click 事件准备好触发时，blur 侦听器已经被调用，你曾经悬停在上面的元素已经消失了。

这是一个应该有效的一般修复（基于 mousedown 事件首先触发的事实）：

var searchEl = $('#search');
var listEl = $('#dropdown');
var keepListOpen = false;

searchEl
  .on('focus', function() {
    listEl.show();
  })
  .on('blur', function() {
    // Hide the list if the blur was triggered by anything other than
    //  one of the list items
    if (!keepListOpen) {
      listEl.hide();
    }
  });

listEl.find('li')
  .on('mousedown', function(event) {
    // Keep the list open so the onClick handler can fire
    keepListOpen = true;
  })
  .on('click', function(event) {
    // Proof that the list item was clicked
    alert('clicked option');
  });

$(window).on('mouseup', function(event) {
  // Return the keepListOpen setting to its default and hide the list

  // *NOTE* We could have tied this handler to the list items, 
  // but it wouldn't have fired if a mousedown happened on a
  // list item and then the user dragged the mouse pointer 
  // out of the area (or out of the window)
  if (keepListOpen) {
    listEl.hide();
    keepListOpen = false;
  }
});

// Bind to `window.top` if your page might be displayed in an iframe
// $(window.top).on('mouseup', function(event) {
//  if (keepListOpen) {
//    listEl.hide();
//    keepListOpen = false;
//  }
//});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="search" type="text" autocomplete="off" placeholder="Click Here">

<ul id="dropdown" style="display: none;">
  <li>Click Me 1</li>
  <li>Click Me 2</li>
  <li>Click Me 3</li>
</ul>