Question

我有一个附加到输入字段的排序下拉列表。如果focusout的新焦点不是孩子，我只想关闭下拉列表。

<div class="input">
    <input type="text">
    <div class="results">
        <div class="result">someresult</div>
    </div>
</div>

我有一个focusin和focusout事件处理程序附加到类div的{{1}}。单击时input本身会获得焦点。当我点击下拉项目（类<input>）时，result会失去焦点，从而触发<input>事件。如果我点击页面上的其他位置，focusout事件也会被触发。

我希望能够判断新的焦点元素是否是focusout的孩子，如果没有，那么我将隐藏下拉列表，否则我将对此<div class="input">执行任何操作单独处理结果上的click事件。

注意：focusout似乎不存在relatedTarget事件的Chrome或Firefox中，这是我在SO上多次看到的解决方案。

Answer 1

您可以绑定click事件并检查事件的toElement以查看点击了哪个元素。

为了查找.input容器外的点击次数，我在document点击了一个监听器。

查看此处的示例：

$('.input').on('click', function(event) {
  event.stopPropagation();
  if ($(event.toElement).hasClass('text-input')) {
    console.log('input clicked');
  } else {
    console.log('clicked inside the `.input` container, outside the input field');
  }
});

$(document).on('click', function(event) {
  console.log('document clicked');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input">
    <input type="text" class="text-input">
    <div class="results">
        <div class="result">someresult</div>
    </div>
</div>

在JQuery焦点上，确定新焦点是否是子元素

1 个答案: