选择元素单击上的 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()以下方法获得更好的兼容性：

 $("select").focus(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>

注意：即使没有抛出错误并且某些条件下的某些浏览器（例如：OS）会触发该事件，规范声明像这样的元素input支持点击事件：

<Input /> 眼镜

interface HTMLInputElement : HTMLElement {

           attribute DOMString       defaultValue;

           attribute boolean         defaultChecked;

  readonly attribute HTMLFormElement form;

           attribute DOMString       accept;

           attribute DOMString       accessKey;

           attribute DOMString       align;

           attribute DOMString       alt;

           attribute boolean         checked;

           attribute boolean         disabled;

           attribute long            maxLength;

           attribute DOMString       name;

           attribute boolean         readOnly;

  // Modified in DOM Level 2:

           attribute unsigned long   size;

           attribute DOMString       src;

           attribute long            tabIndex;

  // Modified in DOM Level 2:

           attribute DOMString       type;

           attribute DOMString       useMap;

           attribute DOMString       value;

  void               blur();

  void               focus();

  void               select();

  void               click();

};

而select不是：

<Select /> 眼镜

interface HTMLSelectElement : HTMLElement {

  readonly attribute DOMString       type;

           attribute long            selectedIndex;

           attribute DOMString       value;

  // Modified in DOM Level 2:

           attribute unsigned long   length;

                                        // raises(DOMException) on setting

  readonly attribute HTMLFormElement form;

  // Modified in DOM Level 2:

  readonly attribute HTMLOptionsCollection options;

           attribute boolean         disabled;

           attribute boolean         multiple;

           attribute DOMString       name;

           attribute long            size;

           attribute long            tabIndex;

  void               add(in HTMLElement element, 

                         in HTMLElement before)

                                        raises(DOMException);

  void               remove(in long index);

  void               blur();

  void               focus();

};

参考：https : //www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-94282980

Answer 2

我终于通过替换click来修复它mouseup

 $("select").mouseup(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>