Question

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

$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事件在let strongself = self上进行了更改。重定向将在单击选择后立即发生，但是只有在将选择框突出显示并且选择了一个值时，才会发生在使用键盘时发生的情况。

Answer 2

由于选择会导致（在您的情况下）导航，因此最简单的解决方案是避免发生更改事件。而是保存初始值，并在单击或模糊时与当前值进行比较。

var defaultValue = $('#select').val();
$('#select').focus();
$('#select').on('click blur', function(event) {
  if (defaultValue === $(this).val()) {
    return
  }
  // no need to save with location.href
  defaultValue = $(this).val()
  console.log($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="option" id="select">
<option value="1">1</option>
<option value="2">2</option>
</select>

用键盘选择onchange-在焦点对准之前不触发onchange事件吗？

2 个答案: