这篇翻译不完整。请帮忙从英语翻译这篇文章。
点击事件在元素被点击或者释放时(通常是通过鼠标)触发
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 ) { // display the current click count inside the clicked 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:
- For IE9 only:
- Set
background-color
: rgba(0,0,0,0) - Set
and an explicitopacity
: 0background-color
other thantransparent
- Set
- For IE8 and IE9: Set
filter: alpha(opacity=0);
and an explicitbackground-color
other thantransparent
Safari Mobile
Safari Mobile 7.0+ (and likely earlier versions too) suffers from a bug where click
events aren't fired on elements that aren't typically interactive (e.g. <div>
) and which also don't have event listeners directly attached to the elements themselves (i.e. event delegation is being used). See this live example for a demonstration. See also Safari's docs on making elements clickable and the definition of "clickable element".
Known workarounds for this bug:
- Set
cursor
: pointer;
on the element or any of its ancestors. - Add a dummy
onclick="void(0)"
attribute to the element or any of its ancestors up to but not including<body>
. - Use a typically interactive element (e.g.
<a>
) instead of one that isn't typically interactive (e.g.<div>
). - Stop using
click
event delegation.
Safari Mobile considers the following elements to be typically interactive (and thus they aren't affected by this bug):
<a>
(but it must have anhref
)<area>
(but it must have anhref
)<button>
<img>
<input>
<label>
(but it must be associated with a form control)<textarea>
- This list is incomplete; you can help MDN by doing further testing/research and expanding it.
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.