为什么以下Jquery event.target无法正常工作

Question

以下是我的问题代码

(function($) {
  'use strict';
  var button = $('#open_button');
  var box = $('#dropdown');

  function init() {
    eventsInit();
  }

  function eventsInit() {
    box.hide();
    button.on('click', open);
  }

  function open(event) {
    if (event.target !== button[0]) {
      box.hide();
    } else {
      box.show();
    }
  }

  init();
})(jQuery);

body,
html {
  padding: 0;
  margin: 0;
}

#container {
  height: 100px;
  width: 800px;
  margin: 0 auto;
}

h1 {
  color: white;
}

#dropdown {
  height: 600px;
  width: 800px;
  background-color: black;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <form action="" id="open_button">
    <input type="text" placeholder="Enter the text" />
  </form>
</div>

<div id="dropdown"></div>

当我点击输入表格输入元素时我需要下拉，当我点击外面时关闭它。

我的代码我相信它说，如果点击目标不是按钮，请关闭下拉列表，否则显示。

有人可以解释，为什么它不起作用？

Answer 1

(event.target !== button[0])永远是真的。

• event.target是<input>字段。
• button[0]是<form>元素。

您可以将#open_button id移动到输入字段，这会导致在用户单击输入字段时显示该框 - 但随后该框永远不会消失（因为您的if条件永远不会返回真。）

您真正想要的是输入字段上的focus和blur处理程序，分别显示和隐藏框：

＆＃13;

＆＃13;

$('#open_button input').on('focus', function() {
  $('#dropdown').show()
}).on('blur', function() {
  $('#dropdown').hide()
});

// added to answer per comment below:
$('#dropdown').on('mousedown',function(e) {
  e.preventDefault() // prevent input field from losing focus when user clicks inside the box
});

$('#dropdown').hide();

＆＃13;

#dropdown {
  height: 600px;
  width: 800px;
  background-color: black;
  margin: 0 auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <form action="" id="open_button">
    <input type="text" placeholder="Enter the text" />
  </form>
</div>

<div id="dropdown"></div>

＆＃13;

＆＃13;

＆＃13;