OnClick以及侦听器无法正常工作

Question

我想通过onclick事件或侦听器执行功能getUser()。我已经尝试过这两种方法，但是它们都不起作用。

下面您可以找到我的代码。我该如何运作？

我已经尝试使用按钮和输入而不是div，效果也不佳。如果您使用按钮或输入而不是div，则听众也不会。

$(document).on('focus', '#search_input', function() {
  $("#autocomplete-list").show();
});

$(document).on('blur', '#search_input', function() {
  $("#autocomplete-list").hide();
});


$(document).on('click', '.search-items', function() {
  console.log(this);
});

function getUser(id){
  console.log(id + "triggered");
}

/* Autocomplete Stlying */

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 15px;
  right: 15px;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
  text-align: left;
}

.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}

.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="col-md-4">
  <div id="search_input_wrapper" class="autocomplete form-group" style="margin: 0px">
    <input id="search_input" type="text" name="search_input" class="form-control" placeholder="Kunde" style="margin-top: 25px;">
    <div id="autocomplete-list" class="autocomplete-items" style="display: none;">
      <div class="search-items" onclick="getUser(2)">2: Max, Mustermann</div>
      <div class="search-items" onclick="getUser(3)">3: Tom, Maier</div>
    </div>
  </div>
</div>

我将不胜感激。

Answer 1

您需要在输入和列表元素上使用stopPropagation()，例如：

$(document).on('focus', '#search_input', function() {
  $("#autocomplete-list").show();
});

$(document).on('click', function() {
  $("#autocomplete-list").hide();
});

$("#autocomplete-list, #search_input_wrapper").on('click', function() {
  event.stopPropagation();
});


function getUser(id) {
  console.log(id + "triggered");
}

/* Autocomplete Stlying */

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 15px;
  right: 15px;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
  text-align: left;
}

.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}

.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="col-md-4">
  <div id="search_input_wrapper" class="autocomplete form-group" style="margin: 0px">
    <input id="search_input" type="text" name="search_input" class="form-control" placeholder="Kunde" style="margin-top: 25px;">
    <div id="autocomplete-list" class="autocomplete-items" style="display: none;">
      <div class="search-items" onclick="getUser(2)">2: Max, Mustermann</div>
      <div class="search-items" onclick="getUser(3)">3: Tom, Maier</div>
    </div>
  </div>
</div>

Answer 2

stopPropagation停止使DOM树冒泡的事件。换句话说，当您点击search-items时，默认的javascript行为是也触发对被点击元素的父母/祖父母的点击。

因此，当您单击search-items时，将触发对#search-input的单击。这样，打开的列表将关闭。使用stopPropagation()可以消除此行为，并告诉javascript仅应在clicked元素上监听click事件。

在下面的代码中，e是event的缩写，在您的情况下，该事件是click事件。

我对您的代码做了一些小的更改，但是您仍然可以使用blur和focus。有很多方法可以重写此代码，但重要的是stopPropagation

// changed to click and toggle() to show hide the list
// but you can keep the blur and focus if you like

$(document).on('click', '#search_input', function() {
  $("#autocomplete-list").toggle();
});

$(document).on('click', '.search-items', function(e) {
  e.stopPropagation() 
  getUser(e.target.id) 
  // event = click, target = .search-items, id = the id of the clicked target
  // just pass the id to to your getUser function
});

function getUser(id) {
console.log(`user has id ${id}`)
// concatenate strings using new Template Literals
}

/* Autocomplete Stlying */

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 15px;
  right: 15px;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
  text-align: left;
}

.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}

.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="col-md-4">
  <div id="search_input_wrapper" class="autocomplete form-group" style="margin: 0px">
    <input id="search_input" type="text" name="search_input" class="form-control" placeholder="Kunde" style="margin-top: 25px;">
    <div id="autocomplete-list" class="autocomplete-items" style="display: none;">
      <div class="search-items" id="2">2: Max, Mustermann</div>
      <div class="search-items" id="3">3: Tom, Maier</div>
    </div>
  </div>
</div>

来自jQuery documentation

  

说明：防止事件使DOM树冒泡，从而防止任何父处理程序收到该事件的通知。

还有MDN documentation

  

防止当前事件在捕获和传播中进一步传播   起泡阶段。

如果有任何疑问，请在下面的评论中提问

Answer 3

不需要使用stopPropagation。

您的.blur（发生的第一个事件）会防止在菜单上单击.click，因为它甚至在您单击之前就将其隐藏。您可以将延迟添加到菜单隐藏中，或者在隐藏项目之前检测用户何时将其悬停在项目上。但是，现在您遇到了一种情况，即用户在悬停，但是按tab或以其他方式失去焦点，因此您必须处理该问题。

var focusedOnSearchItem = false;
$('.search-items').click(function() {
  // console.log('search-items click()',this);
  $("#autocomplete-list").hide();
});
$('.search-items').mouseenter(function() {
  focusedOnSearchItem = true;
});
$('.search-items').mouseleave(function() {
  focusedOnSearchItem = false;
});

$('#search_input').focus(function() {
  $("#autocomplete-list").show();
});

$('#search_input').blur(function(event) {
  if(!focusedOnSearchItem)
    $("#autocomplete-list").hide();
});

function getUser(id){
  console.log(id + "triggered");
}

/* Autocomplete Stlying */

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 15px;
  right: 15px;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
  text-align: left;
}

.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}

.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="col-md-4">
  <div id="search_input_wrapper" class="autocomplete form-group" style="margin: 0px">
    <input id="search_input" type="text" name="search_input" class="form-control" placeholder="Kunde" style="margin-top: 25px;">
    <div id="autocomplete-list" class="autocomplete-items" style="display: none;">
      <div class="search-items" onclick="getUser(2)">2: Max, Mustermann</div>
      <div class="search-items" onclick="getUser(3)">3: Tom, Maier</div>
    </div>
  </div>
</div>