click

点击事件在元素被点击或者释放时（通常是通过鼠标）触发

General info

Specification
DOM L3
Interface
MouseEvent
Bubbles
Yes
Cancelable
Yes
Target
Element
Default Action
Varies

Properties

Property Type Description
target 只读 EventTarget The event target (the topmost target in the DOM tree).
type 只读 DOMString The type of event.
bubbles 只读 Boolean Whether the event normally bubbles or not
cancelable 只读 Boolean Whether the event is cancellable or not?
view 只读 WindowProxy document.defaultView (window of the document)
detail 只读 long (float) A count of consecutive clicks that happened in a short amount of time, incremented by one.
currentTarget 只读 EventTarget The node that had the event listener attached.
relatedTarget 只读 EventTarget For mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX 只读 long The X coordinate of the mouse pointer in global (screen) coordinates.
screenY 只读 long The Y coordinate of the mouse pointer in global (screen) coordinates.
clientX 只读 long The X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY 只读 long The Y coordinate of the mouse pointer in local (DOM content) coordinates.
button 只读 unsigned short The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons 只读 unsigned short The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure 只读 float The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey 只读 boolean true if the control key was down when the event was fired. false otherwise.
shiftKey 只读 boolean true if the shift key was down when the event was fired. false otherwise.
altKey 只读 boolean true if the alt key was down when the event was fired. false otherwise.
metaKey 只读 boolean true if the meta key was down when the event was fired. false otherwise.

Example

<div id="test"></div>
<script>
  document.getElementById("test").addEventListener("click", function( event ) {
    // 在被点击的div内显示一定时间内的连续点击次数
    event.target.innerHTML = "click count: " + event.detail;
  }, false);
</script>

Browser compatibility

Internet Explorer

Internet Explorer 8 & 9 suffer from a bug where elements with a computed background-color of transparent that are overlaid on top of other element(s) won't receive click events. Any click events will be fired at the underlying element(s) instead. See this live example for a demonstration.

Known workarounds for this bug:

Safari Mobile

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

解决方法如下：

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

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

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

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] Only works for <textarea> elements and some <input> element types.

[2] Internet Explorer only triggers the click event on <input> elements of type checkbox or radio when the element is double-clicked.

See also

文档标签和贡献者