click - Web API 接口参考 编辑

当定点设备的按钮（通常是鼠标左键）在一个元素上被按下和放开时，click事件就会被触发。

一般信息

规范

DOM L3

接口

MouseEvent

是否冒泡

Yes

是否可取消

Yes

对象

Element

默认动作

无定型

属性

属性	类型	描述
target 只读	EventTarget	事件对象 (位于DOM树最上面的元素).
type 只读	DOMString	事件类型.
bubbles 只读	Boolean	是否冒泡
cancelable 只读	Boolean	是否可被取消
view 只读	WindowProxy	document.defaultView (该文档的window 对象)
detail 只读	long (float)	在短时间内发生的连续点击次数的计数。
currentTarget 只读	EventTarget	被事件监听触发的节点.
relatedTarget 只读	EventTarget	对于 mouseover, mouseout, mouseenter 和mouseleave 事件: 值为与其互补的事件(比如mouseenter 就为mouseleave). 否则为null.
screenX 只读	long	点击事件发生时鼠标对应的屏幕x轴坐标.
screenY 只读	long	点击事件发生时鼠标对应的屏幕y轴坐标.
clientX 只读	long	点击事件发生时鼠标对应的浏览器窗口的x轴坐标.
clientY 只读	long	点击事件发生时鼠标对应的浏览器窗口的y轴坐标.
button 只读	unsigned short	点击时按下的鼠标按钮: 左键=0, 中间按钮=1 (如果实现的话), 右键=2. 对于配置为左手使用按钮的操作被反转的鼠标，这些值从右向左读取。
buttons 只读	unsigned short	当鼠标事件被触发时按钮的buttons: 左键=1, 右键=2, 中间按钮=4, 第四个按钮(通常是"返回")=8,第五个按钮(通常是"前进")=16.若有两个或以上的按钮按下,返回以逻辑或运算形成的合并值.例如左键右键同时按下就返回 3 (=1 | 2). 更多信息.
mozPressure 只读	float	压力应用于接触或tabdevice时生成的事件的数量；该值介于0（最小压力）和1（最大压力）。
ctrlKey 只读	boolean	当事件被触发时ctrl按键被按下时为true，否则为false。
shiftKey 只读	boolean	当事件被触发时shift按键被按下时为true，否则为false。
altKey 只读	boolean	当事件被触发时alt按键被按下时为true，否则为false。
metaKey 只读	boolean	当事件被触发时meta按键被按下时为true，否则为false。

样例

<div id="test"></div>

<script>
  document.getElementById("test").addEventListener("click", function( event ) {
    // 在被点击的div内显示当前被点击次数
    event.target.textContent = "click count: " + event.detail;
  }, false);
</script>

浏览器兼容性

Internet Explorer

Internet Explorer 8 & 9存在一个漏洞，具有经background-color样式计算为transparent的元素覆盖在其它元素顶端时，不会收到click事件。取而代之，所有click事件将被触发于其底下的元素。参见this live example样例。

已知会触发此漏洞的情景：

• 仅对于IE9：
  • 设置background-color: rgba(0,0,0,0)
  • 设置opacity: 0 并且明确指定background-color而不是transparent
• 对于IE8和IE9：设置filter: alpha(opacity=0);并且明确指定background-color而不是transparent

Safari手机版

safari手机版会有一个bug，当点击事件不是绑定在交互式的元素上（比如说HTML的div），并且也没有直接的事件监听器绑定在他们自身。可以戳 链接 查看演示。也可以看 Safari 的可点击元素 和 点击元素的定义.

解决方法如下：

• 为其元素或者祖先元素，添加cursor: pointer的样式，使元素具有交互式点击
• 为需要交互式点击的元素添加onclick="void(0)"的属性，但并不包括body元素
• 使用可点击元素如<a>,代替不可交互式元素如div
• 不使用click的事件委托。

Safari 手机版里，以下元素不会受到上述bug的影响：

• <a> 需要href链接
• <area> 需要href
• <button>
• <img>
• <input>
• <label> 需要与form控制器连接
• 这份清单并不完整，你可以帮助MDN做扩展

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

• Desktop
• Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Edge	Opera	Safari
Basic support	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)
On disabled form elements	(Yes)[1]	未实现	(Yes)[2]	未实现	(Yes)[1]	?

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	?	?	?	?	?
On disabled form elements	?	?	?	?	?

[1]只在<textarea> 以及某些<input> 元素上有效.

[2] Internet Explorer 只在<input>的checkbox或radio元素双击时才会引发click事件.

相关链接

• mousedown
• mouseup
• mousemove
• click
• dblclick
• mouseover
• mouseout
• mouseenter
• mouseleave
• contextmenu