Question

我有一个下拉菜单，其中包含一个用于搜索的输入字段和一个带复选框的标签列表。我添加了stopPropagation调用，因此每次单击一个复选框时它都不会关闭但是输入字段上的change事件因此而停止工作。实际上它有效，但我必须在下拉列表上单击鼠标才能激活它。

这是我的HTML：

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"></button>
    <ul class="dropdown-menu scrollable-menu" role="menu">
        <li><input class="form-control input-sm" id="search" type="text" style="height:100%; width:100%" /></li>
        <li><label class="lbl"><input class="checkbox" type="checkbox" value="1">Something</label></li>
        <li><label class="lbl"><input class="checkbox" type="checkbox" value="2">Something else</label></li>
        <li><label class="lbl"><input class="checkbox" type="checkbox" value="2">And so on</label></li>
    </ul>
</div>

这就是我正在使用的功能：

$('.dropdown-menu').click(function (e) {
    e.stopPropagation();
});

$("#search").change(function () {
    //do stuff
})

Answer 1

输入失去焦点时会触发 jQuery 更改（）。

以下是documentation.
的链接

更改事件在其值更改时发送到元素。此事件仅限于元素，框和元素。对于选择框，复选框和单选按钮，当用户使用鼠标进行选择时会立即触发事件，但对于其他元素类型，事件将延迟，直到元素失去焦点。

改为使用输入，因此每次输入更改时都会触发输入。

$('.dropdown-menu').click(function (e) { e.stopPropagation(); }); $("#search").on('input', function () { // ... do stuff });

Here is jfiddle.

Answer 2

就像Roland Ruul所提到的那样，change只有在失去focus时才会开火。 input是您可以采用的一种方式，以及keydown当用户按下按键时搜索输入为焦点，或keyup当用户使用搜索输入释放按键时聚焦。这里有些例子。按住键例如查看keyup的工作原理：

＆＃13;

$(function(){

  $('#input').on('input', function(){
    console.log("Input event fired!");
  });
  
  $('#keydown').on('keydown', function(){
    console.log("Keydown event fired!");
  });
  
  $('#keyup').on('keyup', function(){
    console.log("Keyup event fired!");
  });


});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="Input event" id="input">
<input type="text" placeholder="Keydown event" id="keydown">
<input type="text" placeholder="Keyup event" id="keyup">

＆＃13;

Javascript / JQuery忽略对更改事件的stopPropagation

2 个答案: