javascript - 用键盘选择 onchange - 在 focusout 之前不触发 onchange 事件？

Question

我有一个绑定(bind)到更改事件的选择，以便在进行选择时将用户带到新页面。鼠标没问题，但是当我尝试使用键盘的箭头键进行选择时，更改事件会在我按下箭头时立即触发，而不是等待我跳出，所以我只能选择第一个选项我的键盘。

$selectLocation.on('change', function() {
    location.href = '/data#' + $(this).val().toUpperCase();
});

如何区分更改功能上的点击和按键，或者如何使更改功能不在按键时触发？

Answer 1

考虑以下片段:

// Sets the redirect based on user activity on #test.
$('#test').on('change', function(e) {
 if ($(this).data('clicked')) {
    // A click was used to change the select box, redirect.
    console.log('clicked redirect');
  }
});

// Sets data-keypressed on #test when the down or up arrow key is pressed.
$('#test').on('keydown', function(e) {
  var code = e.keyCode || e.which;
  
  if (code === 38 || code === 40) {
    // Reset data-clicked.
    $(this).data('clicked', false);
    // Bind focusout to the redirect.
    $('#test').unbind('focusout').bind('focusout', function(e) {
      if ($(this).val !== '') {
        // An option is selected.
        console.log('keyboard focusout redirect');
      }
    });
  }
});

// Sets data-clicked on #test.
$('#test').on('click', function(e) {
  // Unbind the focusout event added in the change handler.
  $(this).unbind('focusout');
  // Set data-clicked to be used in the change handler.
  $(this).data('clicked', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="test" data-clicked="false">
<option value="">-- Select an Option --</option>
<option value="1">1</option>
<option value="2">2</option>
</select>

此代码段使用 HTML data 属性设置选择框是否通过 click 更改，并设置 focusout 事件在 keypress 上更改选择框时在选择框上。重定向将在单击选择时立即发生，但是当使用键盘时，只会在选择框聚焦并选择一个值时发生。