recursal/MDN huggingface dataset:
touchend
========

当触点离开触控平面时触发`touchend`事件。

常规信息
----

规范

Touch Events

接口

TouchEvent

是否冒泡

Yes

能否取消默认行为

Yes

目标

Document, Element

默认行为

无

属性
--

| 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) | 0. |
| `touches` 只读  | TouchList | A list of `Touch`es for every point of contact currently touching the surface. |
| `targetTouches` 只读  | TouchList | A list of `Touch`es for every point of contact that is touching the surface and started on the element that is the target of the current event. |
| `changedTouches` 只读  | TouchList | A list of `Touch`es for every point of contact which contributed to the event. For the touchstart event this must be a list of the touch points that just became active with the current event. For the touchmove event this must be a list of the touch points that have moved since the last event. For the touchend and touchcancel events this must be a list of the touch points that have just been removed from the surface. |
| `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. |

例子
--

这些事件的代码示例在这个页面Touch events中均有体现。

规范
--

| Specification |
| --- |
| Touch Events # event-touchend |
| Touch Events # dom-globaleventhandlers-ontouchend |

Related Events
--------------

* `touchstart`
* `touchend`
* `touchmove`
* `touchcancel`
Element.clientHeight
====================

只读属性 **`Element.clientHeight`** 对于没有定义 CSS 或者内联布局盒子的元素为 0；否则，它是元素内部的高度（以像素为单位），包含内边距，但不包括边框、外边距和水平滚动条（如果存在）。

`clientHeight` 可以通过 CSS `height` + CSS `padding` - 水平滚动条高度（如果存在）来计算。

在根元素（`<html>` 元素）或怪异模式下的 `<body>` 元素上使用 `clientHeight` 时，该属性将返回视口高度（不包含任何滚动条）。这是一个 `clientHeight` 的特例。

**备注：** 此属性会将获取的值四舍五入取整数。如果你需要小数结果，请使用 `element.getBoundingClientRect()`。

值
-

一个数字。

示例
--

![](/zh-CN/docs/Web/API/Element/clientHeight/dimensions-client.png)

规范
--

| Specification |
| --- |
| CSSOM View Module # dom-element-clientheight |

### 备注

`clientHeight` 是在 IE 浏览器对象模型中引入的属性。

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `HTMLElement.offsetHeight`
* `Element.scrollHeight`
* 确定元素的宽高
Element：mouseup 事件
==================

**`mousedown`** 事件在定点设备（如鼠标或触摸板）按钮在元素内释放时，在该元素上触发。

`mouseup` 事件与 `mousedown` 事件相对应。

语法
--

在类似 `addEventListener()` 这样的方法中使用事件名称，或者设置事件处理器属性。


```js
addEventListener("mouseup", (event) => {});

onmouseup = (event) => {};
```

事件类型
----

一个 `MouseEvent`。继承自 `Event`。

Event

UIEvent

MouseEvent事件属性
----

*这个接口也继承其父接口 `UIEvent` 和 `Event` 的属性。*

`MouseEvent.altKey` 只读 

当鼠标事件被触发时，如果 `alt` 键已被按下，返回 `true`。

`MouseEvent.button` 只读 

触发鼠标事件时，按下按钮的编号（如果适用）。

`MouseEvent.buttons` 只读 

触发鼠标事件时按下的按钮（如果存在）。

`MouseEvent.clientX` 只读 

鼠标指针相对于局部 DOM 元素的 X 轴坐标。

`MouseEvent.clientY` 只读 

鼠标指针相对于局部 DOM 元素的 Y 轴坐标。

`MouseEvent.ctrlKey` 只读 

当鼠标事件被触发时，如果 `control` 键已被按下，返回 `true`。

`MouseEvent.layerX` (en-US) 
非标准
 只读 

返回事件相对于当前层的水平坐标。

`MouseEvent.layerY` (en-US) 
非标准
 只读 

返回事件相对于当前层的垂直坐标。

`MouseEvent.metaKey` 只读 

当鼠标事件被触发时，如果 `meta` 键已被按下，返回 `true`。

`MouseEvent.movementX` 只读 

鼠标指针相对于最后一次 `mousemove` 事件位置的 X 轴坐标。

`MouseEvent.movementY` 只读 

鼠标指针相对于最后一次 `mousemove` 事件位置的 Y 轴坐标。

`MouseEvent.offsetX` 只读 

鼠标指针相对于目标节点的内填充边的 X 轴坐标。

`MouseEvent.offsetY` 只读 

鼠标指针相对于目标节点的内填充边的 Y 轴坐标。

`MouseEvent.pageX` 只读 

鼠标指针相对于整个文档的 X 轴坐标。

`MouseEvent.pageY` 只读 

鼠标指针相对于整个文档的 Y 轴坐标。

`MouseEvent.relatedTarget` 只读 

事件的次要目标（如果存在）。

`MouseEvent.screenX` 只读 

鼠标指针相对于屏幕的 X 轴坐标。

`MouseEvent.screenY` 只读 

鼠标指针相对于屏幕的 Y 轴坐标。

`MouseEvent.shiftKey` 只读 

当鼠标事件被触发时，如果 `shift` 键已被按下，返回 `true`。

`MouseEvent.mozInputSource` 
非标准
 只读 

生成事件的设备类型（`MOZ_SOURCE_*` 常量之一）。例如，这让你决定鼠标事件是否由实际的鼠标还是触摸事件生成（这可能会在一定程度影响你对事件相关坐标判断的准确性）。

`MouseEvent.webkitForce` (en-US) 
非标准
 只读 

单击时施加的压力。

`MouseEvent.x` 只读 

`MouseEvent.clientX` 的别名。

`MouseEvent.y` 只读 

`MouseEvent.clientY` 的别名。

示例
--

参见 `mousemove` 事件的示例。

规范
--

| Specification |
| --- |
| UI Events # event-type-mouseup |
| HTML Standard # handler-onmouseup |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 事件介绍
* `mousedown`
* `mouseup`
* `mousemove`
* `click`
* `dblclick`
* `mouseover`
* `mouseout`
* `mouseenter`
* `mouseleave`
* `contextmenu`
mousewheel
==========

**已弃用:** 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

 **非标准:** 该特性是非标准的，请尽量不要在生产环境中使用它！

*过时*且*非标准*的 `mousewheel` 事件在元素上异步触发，以在操作鼠标滚轮或类似设备时提供更新。`mousewheel` 事件从未成为任何标准的一部分，虽然它被多个浏览器实现，但 Firefox 从未实现过该事件。

**备注：** 请改用标准的 `wheel` 事件，而不是这个过时的事件。

语法
--

在诸如 `addEventListener()` 等方法中使用事件名称，或设置事件处理器属性。


```js
addEventListener("mousewheel", (event) => {});

onmousewheel = (event) => {};
```

事件类型
----

`wheelEvent`。继承自 `Event`。

Event

UIEvent

MouseEvent

WheelEvent事件属性
----

*该接口继承了其祖先接口 `MouseEvent`、`UIEvent` 和 `Event` 的属性。*

`WheelEvent.deltaX` 只读 

返回一个表示水平滚动量的双精度浮点数（`double`）。

`WheelEvent.deltaY` 只读 

返回一个表示垂直滚动量的双精度浮点数（`double`）。

`WheelEvent.deltaZ` 只读 

返回一个表示 Z 轴滚动量的双精度浮点数（`double`）。

`WheelEvent.deltaMode` 只读 

返回一个无符号长整型（`unsigned long`)，其表示 `delta*` 值的滚动数量的单位。允许的值如下：

| 常量 | 值 | 描述 |
| --- | --- | --- |
| `WheelEvent.DOM_DELTA_PIXEL` | `0x00` | `delta*` 值以像素为单位为准。 |
| `WheelEvent.DOM_DELTA_LINE` | `0x01` | `delta*` 值以行为单位指定。每次鼠标单击滚动一个内容行，而计算行高度的方法取决于浏览器。 |
| `WheelEvent.DOM_DELTA_PAGE` | `0x02` | `delta*` 值以页为单位指定。每次鼠标单击滚动一个页面的内容。 |

`WheelEvent.wheelDelta` 只读  
已弃用

返回一个表示像素距离的整数（32 位）。

`WheelEvent.wheelDeltaX` 只读  
已弃用

返回一个表示水平滚动量的整数。

`WheelEvent.wheelDeltaY` 只读  
已弃用

返回一个表示垂直滚动量的整数。

详细属性
----

`detail` 属性的值始终为零，除了 Opera 之外。Opera 使用 `detail` 属性与仅适用于 Firefox 的 `DOMMouseScroll` (en-US) 事件的 `detail` 值类似，该值表示以行为单位的滚动距离，负值表示滚动向底部或右侧移动，正值表示向顶部或左侧滚动。

**备注：** 在 macOS 上，滚动距离（以及 `detail` 的值）是根据加速滚动距离计算的。

wheelDelta、wheelDeltaX 和 wheelDeltaY 的值
---------------------------------------

`wheelDelta` 属性值是一个抽象值，表示滚轮转动的距离。如果滚轮向用户旋转，则该值为正，否则为负。这意味着 delta 值的符号与 DOM Level 3 事件的 `wheel` 属性不同。然而，这些值的数量意义在不同的浏览器中也不相同。详见以下说明。

IE 和 Opera（Presto）仅支持 `wheelDelta` 属性，不支持水平滚动。

`wheelDeltaX` 属性值表示沿水平轴的 `wheelDelta` 属性值。当用户操作设备向右滚动时，该值为负。反之，即向左滚动时，该值为正。

`wheelDeltaY` 属性值表示沿垂直轴的 `wheelDelta` 属性值。该值的符号与 `wheelDelta` 属性值相同：向用户滚动时为正，向远离用户的方向滚动时为负。

### Chrome

在 Windows 上，该值与 `WM_MOUSEWHEEL` 或 `WM_MOUSEHWHEEL` 的 delta 值相同。并且，即使系统设置的滚动量为页面滚动，该值也不会改变，即该值与 Windows 上的 IE 相同。

在 Linux 上，本机滚轮事件每次的值为 `120` 或 `-120`。这使得行为与 Windows 上的 IE 和 Chrome 相同。

如果**设备**支持连续滚动（例如，MacBook 的触摸板或可以平滑旋转的鼠标滚轮），则该值从加速滚动量计算而得。在这种情况下，该值与 Safari 一致。

如果设备**不**支持连续滚动（通常是旧的无法平滑旋转的鼠标滚轮），则该值从非加速滚动量（每个齿轮 120）计算而得。在这种情况下，该值与 Safari 不同。

这种差异对 Web 应用程序开发人员来说是一个严重的问题。也就是说，Web 开发人员无法知道 `mousewheel` 事件是由哪个设备引起的。

### Safari

该值始终是从加速滚动量计算而来的。这与除支持连续滚动的设备的 Chrome 之外的其他浏览器非常不同。

### Opera（Presto）

该值始终是 `detail` 属性值 ✕ `40`。

在 Windows 上，由于 `detail` 属性值是从实际滚动量计算得出的，因此该值与其他浏览器不同，除非系统设置或页面中的每个滚动步距为 3 行。

在 Linux 上，每个原生滚轮事件的值为 `80` 或 `-80`。这与其他浏览器不同。

在 Mac 上，`detail` 属性值是从原生事件的加速滚动量计算得出的。该值通常比 Safari 或 Chrome 的值要大得多。

规范
--

不属于任何规范。

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 请改用标准的 `wheel` 事件来监听。
Element：firstElementChild 属性
============================

**`Element.firstElementChild`** 只读属性返回元素的第一个子元素，如果没有子元素，则为 `null`。

`Element.firstElementChild` 仅包含元素节点。要获取所有子节点（包括文本和注释节点等非元素节点），请使用 `Node.firstChild`。

值
-

一个 `Element` 对象，或 `null`。

示例
--


```html
<ul id="list">
  <li>First (1)</li>
  <li>Second (2)</li>
  <li>Third (3)</li>
</ul>

<script>
 const list = document.getElementById("list");
 console.log(list.firstElementChild.textContent);
 // 输出“First (1)”
</script>
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-firstelementchild① |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `Element.nextElementSibling`
* `Element.lastElementChild`
Element.classList
=================

**`Element.classList`** 是一个只读属性，返回一个元素 `class` 属性的动态 `DOMTokenList` 集合。这可以用于操作 class 集合。

相比将 `element.className` 作为以空格分隔的字符串来使用，`classList` 是一种更方便的访问元素的类列表的方法。

值
-

一个 `DOMTokenList`，表示元素的 `class` 属性的集合。如果 `class` 属性没有设置或者为空，它将返回一个空的 `DOMTokenList`，即 `length` 属性等于 0 的 `DOMTokenList`。

尽管 `classList` 属性自身是只读的，但是你可以使用 `add()`、`remove()`、`replace()` 和 `toggle()` 方法修改其关联的 `DOMTokenList`。

示例
--


```js
const div = document.createElement("div");
div.className = "foo";

// 初始状态：<div class="foo"></div>
console.log(div.outerHTML);

// 使用 classList API 移除、添加类值
div.classList.remove("foo");
div.classList.add("anotherclass");

// <div class="anotherclass"></div>
console.log(div.outerHTML);

// 如果 visible 类值已存在，则移除它，否则添加它
div.classList.toggle("visible");

// add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10);

console.log(div.classList.contains("foo"));

// 添加或移除多个类值
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");

// 使用展开语法添加或移除多个类值
const cls = ["foo", "bar"];
div.classList.add(...cls);
div.classList.remove(...cls);

// 将类值 "foo" 替换成 "bar"
div.classList.replace("foo", "bar");
```


**备注：** Firefox 26 之前的版本没有在 add/remove/toggle 实现使用多个参数。参见 https://bugzilla.mozilla.org/show\_bug.cgi?id=814014

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-classlist① |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参考
--

* `element.className`
* `DOMTokenList`
* `classList.js` (a cross-browser JavaScript polyfill that fully implements `element.classList`)
Element：beforescriptexecute 事件
==============================

**非标准:** 该特性是非标准的，请尽量不要在生产环境中使用它！

**警告：** 此事件是早期版本的规范中的一个提案。不要依赖它。

**`beforescriptexecute`** 事件在一个脚本被执行前触发，取消此事件可以阻止该脚本的执行。

这是一个 Gecko（Firefox）特有的私有事件。

|  |  |
| --- | --- |
| 是否冒泡 | 是 |
| 是否可取消 | 是 |
| 接口 | `Event` |
| 事件处理器属性 | 无 |

规范
--

不属于任何规范。

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `afterscriptexecute` 事件
Node.hasAttributes
==================

概述
--

`hasAttributes`属性返回一个布尔值`true`或`false`,来表明当前元素节点是否有至少一个的属性 (attribute).

语法
--
```

result = targetNode.hasAttributes();
```

示例
--


```js
var t1 = document.getElementById("table-data");

if (t1.hasAttributes()) {
  // 可以用 t1.attributes 来读取该元素的所有属性
}
```

规范
--

* hasAttributes
Element.insertAdjacentText()
============================

**`insertAdjacentText()`** 方法将一个给定的文本节点插入在相对于被调用的元素给定的位置。

句法
--
```

element.insertAdjacentText(position, element);
```

### 参数

position

A `DOMString` representing the position relative to the `element`; must be one of the following strings:

* `'beforebegin'`: Before the `element` itself.
* `'afterbegin'`: Just inside the `element`, before its first child.
* `'beforeend'`: Just inside the `element`, after its last child.
* `'afterend'`: After the `element` itself.

element

A `DOMString` representing the text to be inserted into the tree.

### 返回值

Void.

### 例外

| Exception | Explanation |
| --- | --- |
| `SyntaxError` | The `position` specified is not a recognised value. |

### Visualization of position names


```html
<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->
```


**备注：** 只有当节点位于树中并具有元素父元素时，beforebegin 和 afterend 位置才能工作。

范例
--


```js
beforeBtn.addEventListener("click", function () {
  para.insertAdjacentText("afterbegin", textInput.value);
});

afterBtn.addEventListener("click", function () {
  para.insertAdjacentText("beforeend", textInput.value);
});
```


Have a look at our insertAdjacentText.html demo on GitHub (see the source code too.) Here we have a simple paragraph. You can enter some text into the form element, then press the *Insert before* and *Insert after* buttons to insert it before or after the existing paragraph text using `insertAdjacentText()`. Note that the existing text node is not added to — further text nodes are created containing the new additions.

规范
--

| Specification |
| --- |
| DOM Standard # dom-element-insertadjacenttext |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `Element.insertAdjacentElement()`
* `Element.insertAdjacentHTML()`
Element：beforeinput 事件
======================

DOM 事件 **`beforeinput`** 在`<input>`, `<select>` 或 `<textarea>` 的值即将被修改前触发。这个事件也可以在 `contenteditable` 被设置为 `true` 的元素和打开 `designMode` 后的任何元素上被触发。

In the case of `contenteditable` and `designMode`, the event target is the **editing host**. If these properties apply to multiple elements, the editing host is the nearest ancestor element whose parent isn't editable.

|  |  |
| --- | --- |
| Bubbles | Yes |
| Cancelable | Yes |
| Interface | `InputEvent` |
| Event handler property | None |
| Sync / Async | Sync |
| Composed | Yes |
| Default Action | Update the DOM element |

示例
--

这个例子会在 `<input>` 元素的值即将被新的值更新前记录下当前的值。

### HTML


```html
<input placeholder="Enter some text" name="name" />
<p id="values"></p>
```

### JavaScript


```js
const input = document.querySelector("input");
const log = document.getElementById("values");

input.addEventListener("beforeinput", updateValue);

function updateValue(e) {
  log.textContent = e.target.value;
}
```

### 结果

规范
--

| Specification |
| --- |
| UI Events # event-type-beforeinput |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 相关事件：`input`
element.getElementsByTagName
============================

**`Element.getElementsByTagName()`** 方法返回一个动态的包含所有指定标签名的元素的 HTML 集合`HTMLCollection`。指定的元素的子树会被搜索，不包括元素自己。返回的列表是动态的，这意味着它会随着 DOM 树的变化自动更新自身。所以，使用相同元素和相同参数时，没有必要多次的调用`Element.getElementsByTagName()` .

如果是 HTML 文档中的某个元素调用了`getElementsByTagName 函数，` 运行前会将参数转为小写字母形式。故不建议在驼峰式命名的 SVG 元素中使用。 `Element.getElementsByTagNameNS()` 适用于那种情况。

`Element.getElementsByTagName` 和 `Document.getElementsByTagName()`类似，除了它的搜索被限制为指定元素的后代。

语法
--
```

elements = element.getElementsByTagName(tagName)
```


* `elements` 搜索到的元素的动态 HTML 集合 `HTMLCollection`，它们的顺序是在子树中出现的顺序。如果没有搜索到元素则这个集合为空。
* `element` 搜索从 element 开始。请注意只有 element 的后代元素会被搜索，不包括元素自己。
* `tagName` 要查找的限定名。字符 `"*"` 代表所有元素。考虑到兼容 XHTML，应该使用小写。
实例
--


```js
// check the alignment on a number of cells in a table.
var table = document.getElementById("forecast-table");
var cells = table.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
  var status = cells[i].getAttribute("data-status");
  if (status == "open") {
    // grab the data
  }
}
```

规范
--

| Specification |
| --- |
| DOM Standard # dom-element-getelementsbytagname |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
dblclick
========

在单个元素上单击两次鼠标的指针设备按钮 (通常是小鼠的主按钮) 时，将触发 `dblclick` 事件。

常规信息
----

规范

DOM L3

接口
`MouseEvent`
是否冒泡

是

可取消默认行为

是

目标对象

元素（Element）

默认行为

多种：开始 drag/drop 操作；开始文本选择、开始滚动或移动操作（若支持该操作时，可与鼠标中键协同）

属性
--

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `target` 只读  | `EventTarget` | 事件对象 (位于 DOM 树最上面的元素). |
| `type` 只读  | `DOMString` | 事件类型。 |
| `bubbles` 只读  | `Boolean` (en-US) | 是否冒泡 |
| `cancelable` 只读  | `Boolean` (en-US) | 是否可被取消 |
| `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). 更多信息. |
| `ctrlKey` 只读  | boolean | 当事件被触发时 ctrl 按键被按下时为 true，否则为 false。 |
| `shiftKey` 只读  | boolean | 当事件被触发时 shift 按键被按下时为 true，否则为 false。 |
| `altKey` 只读  | boolean | 当事件被触发时 alt 按键被按下时为 true，否则为 false。 |
| `metaKey` 只读  | boolean | 当事件被触发时 meta 按键被按下时为 true，否则为 false。 |

规范
--

| Specification |
| --- |
| UI Events # event-type-dblclick |
| HTML Standard # handler-ondblclick |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `mousedown`
* `mouseup`
* `mousemove`
* `click`
* `dblclick`
* `mouseover`
* `mouseout`
* `mouseenter`
* `mouseleave`
* `contextmenu`
Element.getAttributeNames()
===========================

`Element.getAttributeNames()` 返回一个`Array`，该数组包含指定元素（Element）的所有属性名称，如果该元素不包含任何属性，则返回一个空数组。

将 `getAttributeNames()` 与 `getAttribute()` 组合使用，是一种有效替代 `Element.attributes` 的使用方法。

语法
--
```

let attributeNames = element.getAttributeNames();
```

例子
--


```js
// 遍历 elements 的元素
for (let name of element.getAttributeNames()) {
  let value = element.getAttribute(name);
  console.log(name, value);
}
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-getattributenames① |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Element：touchcancel 事件
======================

`touchcancel` 事件在触点被中断时触发，中断方式基于特定实现而有所不同（例如，创建了太多的触点）。

语法
--

在类似 `addEventListener()` 这样的方法中使用事件名称，或设置事件处理器属性。


```js
addEventListener("touchcancel", (event) => {});

ontouchcancel = (event) => {};
```

事件类型
----

`TouchEvent`。继承自 `Event`。

Event

UIEvent

TouchEvent事件属性
----

*此接口从其父接口 `UIEvent` 和 `Event` 继承属性。*

`TouchEvent.altKey` (en-US) 只读 

一个布尔值，表示在事件触发时 Alt 键是否被按下。

`TouchEvent.changedTouches` 只读 

一个包含所有的 `Touch` 对象的 `TouchList`，这些 `Touch` 对象表示在前一个 touch 事件和当前的事件之间，状态发生变化的独立触点。

`TouchEvent.ctrlKey` (en-US) 只读 

一个布尔值，表示在事件触发时控制键是否被按下。

`TouchEvent.metaKey` (en-US) 只读 

一个布尔值，表示在事件触发时 Meta 键是否被按下。

`TouchEvent.shiftKey` (en-US) 只读 

一个布尔值，表示在事件触发时 Shift 键是否被按下。

`TouchEvent.targetTouches` 只读 

一个包含所有的 `Touch` 对象的 `TouchList`，这些 `Touch` 对象表示当前与触摸表面接触的触点，且触点起始于事件发生的目标元素。

`TouchEvent.touches` 只读 

一个包含所有的 `Touch` 对象的 `TouchList`，这些 `Touch` 对象表示当前与表面接触的触点（不论事件目标或状态变化）。

`TouchEvent.rotation` 
非标准
 只读 

自事件开始以来的旋转角度变化（以度为单位）。正值表示顺时针旋转；负值表示逆时针旋转。初始值为 `0.0`。

`TouchEvent.scale` 
非标准
 只读 

自事件开始以来，两个数值之间的距离（缩放倍数）。表示事件开始至现在，触点距离的缩放倍数（浮点数）。小于 1.0 表示向内收缩（缩小），大于 1.0 表示向外松开（放大）。初始值为 `1.0`。

示例
--

这些事件的代码示例可在这个专用页面查看：Touch 事件。

规范
--

| Specification |
| --- |
| Touch Events # event-touchcancel |
| Touch Events # dom-globaleventhandlers-ontouchcancel |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* 以 `Document` 为目标的相同事件：`touchcancel`
Element.scrollWidth
===================

**`Element.scrollWidth`** 这个只读属性是元素内容宽度的一种度量，包括由于 overflow 溢出而在屏幕上不可见的内容。
`scrollWidth`值等于元素在不使用水平滚动条的情况下适合视口中的所有内容所需的最小宽度。宽度的测量方式与`clientWidth`相同：它包含元素的内边距，但不包括边框，外边距或垂直滚动条（如果存在）。它还可以包括伪元素的宽度，例如`::before`或`::after`。如果元素的内容可以适合而不需要水平滚动条，则其`scrollWidth`等于`clientWidth`

**备注：** 1. 这个属性会进行四舍五入并返回整数，如果你需要小数形式的值，使用`element.getBoundingClientRect()`*.*

*2. 在实际测试过程中，谷歌获取的* **`Element.scrollWidth`** 和 IE，火狐下获取的 **`Element.scrollWidth`** 并不相同

语法
--
```

var xScrollWidth = element.scrollWidth;
```


xScrollWidth 的值是元素的内容宽度。

例子
--
```

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <style>
        div {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        #aDiv {
            width: 100px;
        }

        button {
            margin-bottom: 2em;
        }
    </style>
</head>

<body>
    <div id="aDiv">
        FooBar-FooBar-FooBar-FooBar
    </div>
    <button id="aButton">
        Check for overflow
    </button>

    <div id="anotherDiv">
        FooBar-FooBar-FooBar-FooBar
    </div>
    <button id="anotherButton">
        Check for overflow
    </button>
</body>
<script>
    var buttonOne = document.getElementById('aButton'),
    buttonTwo = document.getElementById('anotherButton'),
    divOne = document.getElementById('aDiv'),
    divTwo = document.getElementById('anotherDiv');

    //check to determine if an overflow is happening
    function isOverflowing(element) {
        return (element.scrollWidth > element.offsetWidth);
    }

    function alertOverflow(element) {
        if (isOverflowing(element)) {
            alert('Contents are overflowing the container.');
        } else {
            alert('No overflows!');
        }
    }

    buttonOne.addEventListener('click', function() {
        alertOverflow(divOne);
    });

    buttonTwo.addEventListener('click', function() {
        alertOverflow(divTwo);
    });
</script>
</html>
```

规范
--

The CSSOM View Module defines `scrollWidth`

相关
--

* `Element.clientWidth`
* `Element.offsetWidth`
* Determining the dimensions of elements (en-US)
Element.requestPointerLock()
============================

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

**`Element.requestPointerLock()`** 方法允许你异步地请求将鼠标指针锁定在指定元素上。

若想追踪请求成功还是失败，则需要在 `Document` 级别监听 `pointerlockchange` 和 `pointerlockerror` (en-US) 事件。

语法
--
```

instanceOfElement.requestPointerLock();
```

规范
--

| Specification |
| --- |
| Pointer Lock 2.0 # dom-element-requestpointerlock |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `Document.pointerLockElement`
* `Document.exitPointerLock()`
* Pointer Lock