閱讀(2.8k) 書簽贊(0) 我要糾錯

EventTarget事件：click

2019-01-19 17:30 更新

EventTarget事件 - click

當(dāng)在單個元素上按下并釋放指示設(shè)備按鈕（例如，鼠標(biāo)的主按鈕）時，click事件觸發(fā)。如果按下一個元素上的按鈕并在另一個元素上釋放，則會在包含這兩個元素的最具體的祖先元素上觸發(fā)該事件。

按順序單擊mousedown和mouseup事件后觸發(fā)click。

接口	`MouseEvent`
同步/異步	同步
是否冒泡	是
是否可取消	是
目標(biāo)	`Element`
組成的	是
默認(rèn)操作	不定

屬性

屬性	類型	描述
`target`（只讀）	`EventTarget`	事件目標(biāo)（DOM樹中最頂層的目標(biāo)）。
`type`（只讀）	`DOMString`	事件的類型。
`bubbles`（只讀）	`Boolean`	事件是否正常冒泡
`cancelable`（只讀）	`Boolean`	事件是否可以取消
`view`（只讀）	`WindowProxy`	`Document.defaultView`（`window`文件）
`detail`（只讀）	long（浮點）	在短時間內(nèi)發(fā)生的連續(xù)點擊次數(shù)，遞增1。
`currentTarget`（只讀）	`EventTarget`	附加了事件偵聽器的節(jié)??點。
`relatedTarget`（只讀）	`EventTarget`	對于`mouseover`，`mouseout`，`mouseenter`和`mouseleave`事件：互補事件的目標(biāo)（在`mouseenter`事件的情況下為`mouseleave`目標(biāo)）。否則為`null`。
`screenX` 只讀	`long`	全局（屏幕）坐標(biāo)中鼠標(biāo)指針的X坐標(biāo)。
`screenY` 只讀	`long`	全局（屏幕）坐標(biāo)中鼠標(biāo)指針的Y坐標(biāo)。
`clientX` 只讀	`long`	鼠標(biāo)指針在本地（DOM內(nèi)容）坐標(biāo)中的X坐標(biāo)。
`clientY` 只讀	`long`	鼠標(biāo)指針在本地（DOM內(nèi)容）坐標(biāo)中的Y坐標(biāo)。
`button` 只讀	`unsigned short`	觸發(fā)鼠標(biāo)事件時按下的按鈕編號：左按鈕= 0，中按鈕= 1（如果存在），右按鈕= 2。對于配置為左手使用的鼠標(biāo)，其中按鈕動作被反轉(zhuǎn)，而是從右向左讀取值。
`buttons` 只讀	`unsigned short`	觸發(fā)鼠標(biāo)事件時按下按鈕：左按鈕= 1，右按鈕= 2，中間（滾輪）按鈕= 4，第4按鈕（通常，“瀏覽器返回”按鈕）= 8，第5按鈕（通常為“瀏覽器”轉(zhuǎn)發(fā)“按鈕”= 16。如果按下兩個或更多按鈕，則返回值的邏輯和。例如，如果按下左鍵和右鍵，則返回3（= 1 \| 2）。
`mozPressure` 只讀	`float`	生成事件時施加到觸摸或制表設(shè)備的壓力量；此值介于 0.0 (最小壓力) 和 1.0 (最大壓力) 之間。
`ctrlKey` 只讀	`Boolean`	如果在觸發(fā)事件時控制鍵已關(guān)閉，則為`true`，否則為`false`。
`shiftKey` 只讀	`Boolean`	如果在事件被觸發(fā)時shift鍵已關(guān)閉，則為`true`，否則為`false`。
`altKey` 只讀	`Boolean`	如果事件被觸發(fā)時alt鍵已關(guān)閉，則為`true`，否則為`false`。
`metaKey` 只讀	`Boolean`	如果在觸發(fā)事件時meta鍵已關(guān)閉，則為`true`，否則為`false`。

示例

此示例顯示<button>上的連續(xù)點擊次數(shù)。

HTML

<button>Click</button>

JavaScript的

const button = document.querySelector('button');

button.addEventListener('click', event => {
  button.innerHTML = `Click count: ${event.detail}`;
});

規(guī)范

規(guī)范	狀態(tài)	注釋
未知	Working Draft	將此事件指定為組合。
文檔對象模型（DOM）級別3事件規(guī)范該規(guī)范中“clickclick”的定義。	過時的
文檔對象模型（DOM）級別2事件規(guī)范該規(guī)范中“單擊”的定義。	過時的	初步定義。

瀏覽器兼容性

我們將兼容性數(shù)據(jù)轉(zhuǎn)換為機器可讀的JSON格式。

電腦端

	Chrome	Firefox（Gecko）	Internet Explorer	Edge	Opera	Safari
基本支持	支持	支持	支持	支持	支持	支持
在禁用的表單元素上	支持[1]	不支持	支持[2]	不支持	支持	？

注釋：

[1]僅適用于<textarea>元素和某些<input>元素類型。

[2] Internet Explorer僅在雙擊類型為checkbox或radio的<input>元素時觸發(fā)click事件。

移動端

	Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
基本支持	?	支持	?	?	?	?
在禁用的表單元素上	?	不支持	?	?	?	?

Internet Explorer

Internet Explorer 8和9會受到一個bug的影響，其中，覆蓋在其他元素之上的具有transparent的計算background-color的元素將不會接收click事件。任何click事件都將在底層元素上觸發(fā)。

這個bug的已知解決方法：

僅適用于IE9：
- 設(shè)置background-color: rgba(0,0,0,0)
- 設(shè)置opacity: 0和transparent以外的顯示background-color
對于IE8和IE9：設(shè)置filter: alpha(opacity=0);和transparent以外的顯示background-color

Safari Mobile

這個bug的已知解決方法：

在元素或其任何祖先上設(shè)置cursor: pointer;
將虛擬onclick="void(0)"屬性添加到元素或其任何祖先，但不包括<body>。
使用典型的交互元素（例如，<a>）而不是一個典型的非交互元素（例如，<div>）。
停止使用click 事件委派。

Safari Mobile認(rèn)為以下元素通常是交互式的（因此它們不受此錯誤的影響）：

<a>（但必須有href）
<area>（但必須有href）
<button>
<img>
<input>
<label> （但必須與表單控件關(guān)聯(lián)）
<textarea>
...

以上內(nèi)容是否對您有幫助：

← EventTarget事件：blur

EventTarget事件：compositionstart →

寫筆記

我要補充