时间戳

首页 > 解决方案 > 选择元素单击时的 JQuery 单击事件在 chrome 中不起作用（在 windows 环境中不会出现问题）

javascript - 选择元素单击时的 JQuery 单击事件在 chrome 中不起作用（在 windows 环境中不会出现问题）

问题描述

当我单击 chrome 中的选择元素时，该事件不会在第一次单击时触发（但在那之后，即第二次、第三次......）。为什么以及如何改变它？（在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/

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

标签： javascriptjquery

解决方案

恕我直言，在使用选择时，我们可以通过以下方式获得更好的兼容性.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

推荐阅读