Выберите onchange с клавиатуры - не вызывать событие onchange, пока не произойдет фокусировка?

Question

У меня есть выборка, связанная с событием изменения, чтобы пользователь мог перейти на новую страницу после выбора.Это нормально с мышью, но когда я пытаюсь сделать выбор, используя клавиши со стрелками на моей клавиатуре, событие изменения срабатывает, как только я нажимаю стрелку, а не ожидаю, когда я уйду, так что я могу выбрать только первый вариант смоя клавиатура

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

Как я могу различить щелчок и нажатие клавиши в моей функции изменения, или иначе заставить функцию изменения не срабатывать при нажатии клавиши?

Answer 1

Поскольку выбор вызывает (в вашем случае) навигацию, самое простое решение - избежать события изменения.Вместо этого сохраните начальное значение и сравните с текущим при щелчке или размытии.

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>

Answer 2

Рассмотрим следующий фрагмент:

// 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.Перенаправление будет происходить немедленно при выборе щелчка, но при использовании клавиатуры будет происходить только тогда, когда выделено поле выделения и выбрано значение.