选择元素单击上的 JQuery 单击事件在 chrome 中不起作用

Question

当我点击 chrome 中的 select 元素时，第一次点击时不会触发该事件（但之后，即第二次、第三次...）。为什么以及如何改变它？（在 FF 中工作）

 $("select").click(function() {

   console.log("click");

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select>

  <option>a</option>

</select>

https://jsfiddle.net/pv2eajux/

注意：点击文本，而不是箭头

Answer 1

恕我直言，在使用选择时，我们使用.focus()以下方法获得更好的兼容性：&nbsp;$("select").focus(function() {&nbsp; &nbsp;console.log("click");});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><select>&nbsp; <option>a</option></select>注意：即使没有抛出错误并且某些条件下的某些浏览器（例如：OS）会触发该事件，规范声明像这样的元素input支持点击事件：<Input /> 眼镜interface HTMLInputElement : HTMLElement {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;attribute DOMString&nbsp; &nbsp; &nbsp; &nbsp;defaultValue;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;attribute boolean&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;defaultChecked;&nbsp; readonly attribute HTMLFormElement form;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;attribute DOMString&nbsp; &nbsp; &nbsp; &nbsp;accept;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;attribute DOMString&nbsp; &nbsp; &nbsp; &nbsp;accessKey;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;attribute DOMString&nbsp; &nbsp; &nbsp; &nbsp;align;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;attribute DOMString&nbsp; &nbsp; &nbsp; &nbsp;alt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;attribute boolean&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;checked;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;attribute boolean&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;disabled;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;attribute long&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; maxLength;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;attribute DOMString&nbsp; &nbsp; &nbsp; &nbsp;name;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;attribute boolean&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;readOnly;&nbsp; // Modified in DOM Level 2:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;attribute unsigned long&nbsp; &nbsp;size;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;attribute DOMString&nbsp; &nbsp; &nbsp; &nbsp;src;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;attribute long&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tabIndex;&nbsp; // Modified in DOM Level 2:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;attribute DOMString&nbsp; &nbsp; &nbsp; &nbsp;type;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;attribute DOMString&nbsp; &nbsp; &nbsp; &nbsp;useMap;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;attribute DOMString&nbsp; &nbsp; &nbsp; &nbsp;value;&nbsp; void&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;blur();&nbsp; void&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;focus();&nbsp; void&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;select();&nbsp; void&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;click();};而select不是：<Select /> 眼镜interface HTMLSelectElement : HTMLElement {&nbsp; readonly attribute DOMString&nbsp; &nbsp; &nbsp; &nbsp;type;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;attribute long&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; selectedIndex;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;attribute DOMString&nbsp; &nbsp; &nbsp; &nbsp;value;&nbsp; // Modified in DOM Level 2:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;attribute unsigned long&nbsp; &nbsp;length;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // raises(DOMException) on setting&nbsp; readonly attribute HTMLFormElement form;&nbsp; // Modified in DOM Level 2:&nbsp; readonly attribute HTMLOptionsCollection options;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;attribute boolean&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;disabled;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;attribute boolean&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;multiple;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;attribute DOMString&nbsp; &nbsp; &nbsp; &nbsp;name;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;attribute long&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; size;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;attribute long&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tabIndex;&nbsp; void&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;add(in HTMLElement element,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;in HTMLElement before)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; raises(DOMException);&nbsp; void&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;remove(in long index);&nbsp; void&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;blur();&nbsp; void&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;focus();};参考：https : //www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-94282980

Answer 2

我终于通过替换click来修复它mouseup&nbsp;$("select").mouseup(function() {&nbsp; &nbsp;console.log("click");});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><select>&nbsp; <option>a</option></select>