EventTarget事件:click

2019-01-19 17:30 更新

EventTarget事件 - click

当在单个元素上按下并释放指示设备按钮(例如,鼠标的主按钮)时,click事件触发。如果按下一个元素上的按钮并在另一个元素上释放,则会在包含这两个元素的最具体的祖先元素上触发该事件。

按顺序单击mousedown和mouseup事件后触发click。

接口 MouseEvent
同步/异步 同步
是否冒泡
是否可取消
目标 Element
组成的
默认操作 不定

属性

属性 类型 描述
target(只读) EventTarget 事件目标(DOM树中最顶层的目标)。
type(只读) DOMString 事件的类型。
bubbles(只读) Boolean 事件是否正常冒泡
cancelable(只读) Boolean 事件是否可以取消
view(只读) WindowProxy Document.defaultViewwindow文件)
detail(只读) long(浮点) 在短时间内发生的连续点击次数,递增1。
currentTarget(只读) EventTarget 附加了事件侦听器的节​​点。
relatedTarget(只读) EventTarget 对于mouseovermouseoutmouseentermouseleave事件:互补事件的目标(在mouseenter事件的情况下为mouseleave目标)。否则为null
screenX 只读 long 全局(屏幕)坐标中鼠标指针的X坐标。
screenY 只读 long 全局(屏幕)坐标中鼠标指针的Y坐标。
clientX 只读 long 鼠标指针在本地(DOM内容)坐标中的X坐标。
clientY 只读 long 鼠标指针在本地(DOM内容)坐标中的Y坐标。
button 只读 unsigned short 触发鼠标事件时按下的按钮编号:左按钮= 0,中按钮= 1(如果存在),右按钮= 2。对于配置为左手使用的鼠标,其中按钮动作被反转,而是从右向左读取值。
buttons 只读 unsigned short 触发鼠标事件时按下按钮:左按钮= 1,右按钮= 2,中间(滚轮)按钮= 4,第4按钮(通常,“浏览器返回”按钮)= 8,第5按钮(通常为“浏览器”转发“按钮”= 16。如果按下两个或更多按钮,则返回值的逻辑和。例如,如果按下左键和右键,则返回3(= 1 | 2)。
mozPressure 只读 float 生成事件时施加到触摸或制表设备的压力量;此值介于 0.0 (最小压力) 和 1.0 (最大压力) 之间。
ctrlKey 只读 Boolean 如果在触发事件时控制键已关闭,则为true,否则为false
shiftKey 只读 Boolean 如果在事件被触发时shift键已关闭,则为true,否则为false
altKey 只读 Boolean 如果事件被触发时alt键已关闭,则为true,否则为false
metaKey 只读 Boolean 如果在触发事件时meta键已关闭,则为true,否则为false

示例

此示例显示<button>上的连续点击次数。

HTML

<button>Click</button>

JavaScript的

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

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

规范

规范 状态 注释
未知 Working Draft
将此事件指定为组合。
文档对象模型(DOM)级别3事件规范
该规范中“clickclick”的定义。
过时的  
文档对象模型(DOM)级别2事件规范
该规范中“单击”的定义。
过时的 初步定义。

浏览器兼容性

我们将兼容性数据转换为机器可读的JSON格式。

  • 电脑端


Chrome
Firefox(Gecko) Internet Explorer
Edge
Opera
Safari
基本支持 支持 支持 支持 支持 支持 支持
在禁用的表单元素上 支持[1] 不支持 支持[2] 不支持 支持

注释:

[1]仅适用于<textarea>元素和某些<input>元素类型。

[2] Internet Explorer仅在双击类型为checkbox或radio的<input>元素时触发click事件。

  • 移动端


AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本支持?支持????
在禁用的表单元素上
?不支持????

Internet Explorer

Internet Explorer 8和9会受到一个bug的影响,其中,覆盖在其他元素之上的具有transparent的计算background-color的元素将不会接收click事件。任何click事件都将在底层元素上触发。

这个bug的已知解决方法:

  • 仅适用于IE9:
    • 设置background-color: rgba(0,0,0,0)
    • 设置opacity: 0和transparent以外的显示background-color
  • 对于IE8和IE9:设置filter: alpha(opacity=0);和transparent以外的显示background-color

Safari Mobile

这个bug的已知解决方法:

  • 在元素或其任何祖先上设置cursor: pointer;
  • 将虚拟onclick="void(0)"属性添加到元素或其任何祖先,但不包括<body>。
  • 使用典型的交互元素(例如,<a>)而不是一个典型的非交互元素(例如,<div>)。
  • 停止使用click 事件委派。

Safari Mobile认为以下元素通常是交互式的(因此它们不受此错误的影响):

  • <a>(但必须有href)
  • <area>(但必须有href)
  • <button>
  • <img>
  • <input>
  • <label> (但必须与表单控件关联)
  • <textarea>
  • ...
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号