jQuery change事件在按下箭头时在select上触发

eqqqjvef 于 2023-08-04 发布在 jQuery

关注(0)|答案(3)|浏览(130)

我在很多地方看到jQuery的change事件只会在模糊或鼠标点击时触发，但当我尝试它时，该事件也会在每次按下箭头键时触发。我试图让change事件在使用箭头选择选项时不触发。举例来说：

<select size="4" id="more" name="more" required="required">
    <option value="0">No</option>
    <option value="1">Yes</option>
    <option value="2">Maybe</option>
    <option value="3">No clue</option>
</select>

$('#more').on('change', function(event){
    alert('hi');
});

字符串
此小工具演示了在以下情况下触发事件：http://jsfiddle.net/McWatt/x5cTr/7/
根据jQuery change（）页面，如果我用Tab键切换到select，然后使用箭头选择一个选项，change事件应该在select失去焦点之前不会触发（至少我是这样阅读的）。实际上，我看到每次按下箭头键都会触发更改事件。
http://api.jquery.com/change/的
对于选择框、复选框和单选按钮，当用户使用鼠标进行选择时，事件会立即激发，但对于其他元素类型，事件会延迟到元素失去焦点。
这种行为是否发生了变化，还是我不了解其功能？
更新：我误解了jQuery文档，尽管它们可以更清楚。我已经接受了让我意识到这一点的答案。对于我的问题的实际解决方案，我将一个keydown事件绑定到select，如果使用箭头，则将数据属性设置为false。然后在变更绑定中，我设置了一个条件，仅当data属性为true时才执行变更代码。这不是最好的解决方案，因为如果使用箭头，它会有效地杀死更改回调代码，但由于有一种替代方法来触发该功能（通过按钮），我可以接受此功能。
Update2：这是一个工作小提琴：http://jsfiddle.net/McWatt/BR8QQ/的

// prevent change event being fired on arrow keys
$('#more').data('activation', 'activated').bind({
    keydown: function(event) {
        if(event.which === 38 || event.which === 40){
            $(this).data('activation', 'paused');
        }
    },
    click: function(event) {
        if($(this).data('activation') === 'paused'){
            $(this).data('activation', 'activated');
            $(this).trigger('change');
        }
    },
    change: function(event) {    
        if($(this).data('activation') === 'activated'){
            var time = new Date();
            $('#changed').text(event.type + ": " + time.getTime());
        }
    }
});

型

jquery

来源：https://stackoverflow.com/questions/13941707/jquery-change-event-firing-on-select-when-arrows-pressed

3条答案

按热度按时间

cdmah0mi1#

看上去不准确。据我所知，它与vanilla change事件没有什么不同。
基本上，只要基于文本的输入在其值更改后失去焦点，它就会触发事件。每当单击复选框（或在聚焦时使用空格键切换）时，它都会触发事件。每当一个单选按钮被选中时（通过单击、空格键、箭头键...），它就会触发事件。每当一个选择框被改变时（通过选择，箭头键...），它也会触发事件。
jQuery在这方面与vanilla JS没有什么不同。

赞(0）回复(0）举报 2023-08-04

2w3kk1z52#

也许你也可以在那里添加一个点击检查

$('#more').change(function(event){
    $(this).click(function(event){
    var time = new Date();
    $('#changed').text(event.type + ": " + time.getTime());
    });
 });

字符串
http://jsfiddle.net/x5cTr/13/

赞(0）回复(0）举报 2023-08-04

wtzytmuj3#

以编程方式选择选项时，不激发更改事件。因此，我们可以尝试在按箭头键时禁用更改事件，然后添加我们的行为，而不会干扰先前定义的其他更改事件：

/**
 * Prevent change event being fired on arrow keys.
 */
function PreventSelectChangeArrows() {
  console.log('PreventSelectChangeArrows');

  $('select').keydown(function (e) {
    if (e.keyCode === 38 || e.keyCode === 40) {
      e.preventDefault();

      // Select option programmatically to avoid change event being fired.
      let $select = $(this);
      let $options = $select.find('option');
      let $selected = $select.find('option:selected');
      let index = $options.index($selected);
      let nextIndex = index + (e.keyCode === 38 ? -1 : 1);
      let $next = $options.eq(nextIndex);
      if ($next.length) {
        $next.prop('selected', true);
      }
    }

    // Trigger on change event when pressing spacebar.
    if (e.keyCode === 32) {
      $(this).trigger('change');
      e.preventDefault();
    }

    // Trigger on change event when pressing tab.
    if (e.key === 'Tab' ) {
      $(this).trigger('change');
    }
  });
}

字符串
在我的例子中，你需要按空格键或制表符来触发更改事件。
此代码适用于Chrome，没有在其他浏览器上测试过。

赞(0）回复(0）举报 2023-08-04

我来回答

jQuery change事件在按下箭头时在select上触发

3条答案

相关问题

热门标签

最新问答