单击HTML选择元素上的事件

Question

我想在事件中监听一个click事件。只有当我选择其他项目时，才会触发change事件，但我需要触发一个事件，即使我单击了所选项目。

例如，当我选择Apple时，change事件触发。然后我再次选择Apple，我还需要触发一个事件。

​

$("#fruit").on('click', function() {
  console.log("click event");
});

$("#fruit").on('change', function() {
  console.log("change event");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="fruit">
  <option>Apple</option>
  <option>Pear</option>
</select>

​

Answer 1

据the jQuery docs报道：

当元素的值发生变化时，会向该元素发送change事件。此事件仅限于元素、框和元素。对于选择框、复选框和单选按钮，当用户使用鼠标进行选择时，事件会立即触发，但对于其他元素类型，事件会延迟到元素失去焦点。

由于在“苹果”已被选中的情况下点击“苹果”时没有变化，因此“点击”事件看起来是您最好的选择。为什么您需要在单击相同选项时触发change事件？在这种情况下，也许有比触发更改事件更好的解决方案？

Answer 2

你可以像下面这样点击检查条件，以达到你想要的效果。

​

var flag = false; 
$('#fruit').on('click', function() {
  if (flag) {
    console.log($(this).val()); 
    flag = false;
  } else {
    flag = true;
  }
}).on('blur', function() {
  flag = false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="fruit">
  <option>Apple</option>
  <option>Pear</option>
</select>

​