实际上，当用户使用键盘更改选择控件中的选择时，onclick事件不会触发。您可能必须使用onChange和onClick的组合来获得您正在寻找的行为。

这可能不能直接回答你的问题，但这个问题可以通过简单的设计调整来解决。我知道这可能不是100%适用于所有用例，但我强烈建议您重新考虑您的应用程序的用户流程，以及以下设计建议是否可以实现。

我决定做一些简单的事情，而不是黑客onChange()使用其他事件的替代方案，这并不是真正意义上的目的(模糊，点击等)。

我的解决方法是:

只需预先挂起一个没有任何值的占位符选项标记，如select。

所以，不要只使用下面的结构，这需要一些hack-y替代方案:

<select>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

考虑使用这个:

<select>
  <option selected="selected">Select...</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

因此，通过这种方式，您的代码更加简化，并且每当用户决定选择默认值以外的内容时，onChange将按预期工作。如果您不希望他们再次选择第一个选项，甚至可以将disabled属性添加到第一个选项，并强制他们从选项中选择一些内容，从而触发onChange()触发。

At the time of this answer, I'm writing a complex Vue application and I found that this design choice has simplified my code a lot. I spent hours on this problem before I settled down with this solution and I didn't have to re-write a lot of my code. However, if I went with the hacky alternatives, I would have needed to account for the edge cases, to prevent double firing of ajax requests, etc. This also doesn't mess up the default browser behaviour as a nice bonus (tested on mobile browsers as well).

有时候，你只需要退一步，从大局出发，寻找最简单的解决方案。

这是最简单的方法:

<select name="ab" onchange="if (this.selectedIndex) doSomething();">
    <option value="-1">--</option>
    <option value="1">option 1</option> 
    <option value="2">option 2</option>
    <option value="3">option 3</option>
</select>

工作与鼠标选择和键盘上/下键时，选择是集中。

唯一对我有效的解决方案是完全重置SELECT on“onFocus”事件。这样，SELECT总是在"onChange"事件上"changes":

$('select').on('focus', function(ev) {
    var $select = $(this);
    var options = $select.html();
    $select.empty();
    $select.append(options);
});

$('select').on('change', function(ev) {
    // Now the select element ALWAYS fires onChange
});

我要扩展一下jitbit的答案。当你点击下拉菜单，然后不选择任何东西就关闭下拉菜单时，我觉得很奇怪。最后得出了如下结论:

var lastSelectedOption = null; DDChange = function(Dd) { //Blur after change so that clicking again without //losing focus re-triggers onfocus. Dd.blur(); //The rest is whatever you want in the change. var tcs = $("span.on_change_times"); tcs.html(+tcs.html() + 1); $("span.selected_index").html(Dd.prop("selectedIndex")); return false; }; DDFocus = function(Dd) { lastSelectedOption = Dd.prop("selectedIndex"); Dd.prop("selectedIndex", -1); $("span.selected_index").html(Dd.prop("selectedIndex")); return false; }; //On blur, set it back to the value before they clicked //away without selecting an option. // //This is what is typically weird for the user since they //might click on the dropdown to look at other options, //realize they didn't what to change anything, and //click off the dropdown. DDBlur = function(Dd) { if (Dd.prop("selectedIndex") === -1) Dd.prop("selectedIndex", lastSelectedOption); $("span.selected_index").html(Dd.prop("selectedIndex")); return false; }; <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="Dd" onchange="DDChange($(this));" onfocus="DDFocus($(this));" onblur="DDBlur($(this));"> <option>1</option> <option>2</option> </select> <br/> <br/>Selected index: <span class="selected_index"></span> <br/>Times onchange triggered: <span class="on_change_times">0</span>

这对用户来说更有意义，并且允许JavaScript在每次选择任何选项(包括先前的选项)时运行。

这种方法的缺点是，它破坏了在下拉菜单上使用tab键并使用方向键选择值的功能。这对我来说是可以接受的，因为所有用户都会一直点击所有内容，直到永恒结束。

当元素获得焦点时改变select的值，例如(使用jquery):

$("#locationtype").focus(function() {
    $("#locationtype").val('');
});

$("#locationtype").change(function() {
    if($("#locationtype").val() == 1) {
        $(".bd #mapphp").addClass('show');
        $("#invoerform").addClass('hide');
    }
    if($("#locationtype").val() == 2) {
        $(".lat").val('');
        $(".lon").val('');
    }
});