时间戳

首页 > 解决方案 > 使用键盘选择 onchange - 在焦点消失之前不要触发 onchange 事件？

javascript - 使用键盘选择 onchange - 在焦点消失之前不要触发 onchange 事件？

问题描述

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

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

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

标签： javascriptjqueryselectonchange

解决方案

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

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>

推荐阅读