recursal/MDN huggingface dataset:
HTMLHyperlinkElementUtils.toString()
====================================

**`HTMLHyperlinkElementUtils.toString()`** 方法返回一个包含整个 URL 的 `USVString` 。它是`HTMLHyperlinkElementUtils.href` 的一个只读版本。

句法
--
```

string = object.toString();
```

范例
--


```js
/\*
Let's imagine an
<a id="myAnchor" href="https://developer.mozilla.org/zh-CN/docs/HTMLHyperlinkElementUtils/toString">
 element is in the document
\*/
var anchor = document.getElementById("myAnchor");
var result = anchor.toString();
// Returns: 'https://developer.mozilla.org/zh-CN/docs/HTMLHyperlinkElementUtils/toString'
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-hyperlink-href-dev |

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

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

参见
--

* The `HTMLHyperlinkElementUtils` mixin it belongs to.
HTMLAnchorElement.referrer
==========================

**`HTMLAnchorElement.referrer`** 属性对应于 HTML 中 `<a>` 标签的 `referrer` 属性，它可以控制用户在点击这个链接时所发出的 HTTP 请求的 Referer 请求头的值。

语法
--


```js
refStr = anchorElt.referrer;
anchorElt.referrer = refStr;
```

### 属性值

* `"no-referrer"` 意味着不要发送 Referer 请求头。
* `"origin"` 意味着所发送的 Referer 请求头的值为当前页面的源，即 `location.origin` 的值。
* `"unsafe-url"` 意味着所发送的 Referrer 请求头的值为当前页面完整的 url（即 `location.href`）去掉尾部的哈希（即 `location.hash`）之后的值。正如该选项的名字所言（unsafe），此选项是不安全的，它可以将一个 HTTPS 页面的路径信息透露给第三方。
示例
--


```js
var elt = document.createElement("a");
var linkText = document.createTextNode("My link");
elt.appendChild(linkText);
elt.href = "https://developer.mozilla.org/en-US/";
elt.referrer = "no-referrer";

var div = document.getElementById("divAround");
div.appendChild(elt); // 点击该链接接时不会发送 Referer 请求头
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-a-referrerpolicy |

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

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

参见
--

* `HTMLImageElement.referrerPolicy`、`HTMLAreaElement.referrerPolicy` (en-US) 和 `HTMLIFrameElement.referrerPolicy` (en-US)
HTMLHyperlinkElementUtils.origin
================================

**`HTMLHyperlinkElementUtils.origin`** 只读属性是一个 `USVString` ，其中包含代表 URL 的原始码的 Unicode 序列化，即：

* for URL using the `http` or `https`, the scheme followed by `'://'`, followed by the domain, followed by `':'`, followed by the port (the default port, `80` and `443` respectively, if explicitely specified);
* for URL using `file:` scheme, the value is browser dependant;
* for URL using the `blob:` scheme, the origin of the URL following `blob:`. E.g `"blob:https://mozilla.org"` will have `"https://mozilla.org".`

**备注：** 此特性在 Web Worker 中可用

Syntax
------
```

string = object.origin;
```

Examples
--------


```js
// On this page, returns the origin
var result = window.location.origin; // Returns:'https://developer.mozilla.org'
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-hyperlink-origin-dev |

Browser compatibility
---------------------

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

See also
--------

* The `HTMLHyperlinkElementUtils` mixin it belongs to.
HTMLAnchorElement：pathname 属性
=============================

**`HTMLAnchorElement.pathname`** 属性是一个字符串，首先为 `'/'`，后面是不包含查询字符串或片段的 URL 路径（如果没有路径，则为空字符串）。

值
-

一个字符串。

示例
--


```js
// 假设文档中有一个这样的元素：<a id="myAnchor" href="/zh-CN/docs/HTMLAnchorElement">
const anchor = document.getElementById("myAnchor");
anchor.pathname; // 返回 '/zh-CN/docs/HTMLAnchorElement'
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-hyperlink-pathname-dev |

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

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

参见
--

* 所属接口 `HTMLAnchorElement` (en-US)。
HTMLAnchorElement：username 属性
=============================

**`HTMLAnchorElement.username`** 属性是一个字符串，包含在域名之前指定的用户名。

值
-

一个字符串。

示例
--

### 从锚点链接中获取用户名


```js
// 假设文档中含有这样的元素：<a id="myAnchor" href="https://anonymous:flabada@developer.mozilla.org/zh-CN/docs/HTMLAnchorElement">
const anchor = document.getElementByID("myAnchor");
anchor.username; // 返回 'anonymous'
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-hyperlink-username-dev |

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

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

参见
--

* 所属接口 `HTMLAnchorElement` (en-US)。
HTMLAnchorElement：hash 属性
=========================

**`HTMLHyperlinkElementUtils.hash`** 属性返回一个字符串，其中包含一个 `'#'`，后面是 URL 的片段标识符。

片段没有经过百分号编码。如果 URL 没有包含片段标识符，这个属性为一个空的字符串，`""`。

值
-

一个字符串。

示例
--

### 从锚点链接获取 hash 值

给定 HTML 代码如下：


```html
<a id="myAnchor" href="/zh-CN/docs/HTMLAnchorElement#示例">示例</a>
```


你可以像这样获取锚点的 hash 值：


```js
const anchor = document.getElementById("myAnchor");
anchor.hash; // 返回 '#示例'
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-hyperlink-hash-dev |

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

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

参见
--

* 所属接口 `HTMLAnchorElement` (en-US)。
HTMLAnchorElement：protocol 属性
=============================

**`HTMLAnchorElement.protocol`** 属性是一个表示 URL 协议方案的字符串，包含结尾的 `':'`。

值
-

一个字符串。

示例
--

### 从锚点元素的链接中获取协议


```js
// 文档中有一个 <a id="myAnchor" href="https://developer.mozilla.org/zh-CN/HTMLAnchorElement"> 元素
const anchor = document.getElementById("myAnchor");
anchor.protocol; // 返回 'https:'
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-hyperlink-protocol-dev |

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

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

参见
--

* 所属的 `HTMLAnchorElement` (en-US) 接口。
HTMLAnchorElement：password 属性
=============================

**`HTMLAnchorElement.password`** 属性是一个字符串，包含域名前面指定的密码。

如果在没有首先设置 `username` 属性的情况下设置，则会静默失败。

值
-

一个字符串。

示例
--


```js
// 假设文档中有一个这样的元素：<a id="myAnchor" href="https://anonymous:flabada@developer.mozilla.org/zh-CN/docs/HTMLAnchorElement">
const anchor = document.getElementByID("myAnchor");
anchor.password; // 返回 'flabada'
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-hyperlink-password-dev |

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

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

参见
--

* 所属接口 `HTMLAnchorElement` (en-US)。
HTMLHyperlinkElementUtils.search
================================

**`HTMLHyperlinkElementUtils.search`** 属性是一个搜索字符串，也叫做查询字符串，它是一个 `USVString` ，包含 `'?'` 和随后的 URL 参数。

语法
--
```

string = object.search;
object.search = string;
```

示例
--


```js
// 让一个
// <a id="myAnchor" href="https://developer.mozilla.org/zh-CN/docs/HTMLHyperlinkElementUtils.search?q=123" />
// 元素在文档里

let anchor = document.getElementById("myAnchor");
let result = anchor.search;
// 返回:'?q=123'
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-hyperlink-search-dev |

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

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

相关链接
----

* 它属于`HTMLHyperlinkElementUtils` mixin。
HTMLAnchorElement.href
======================

**`HTMLAnchorElement.href`** 属性是一个返回包含整个 URL 的字符串的 stringifier (en-US)，且允许 href 被更新。

值
-

一个字符串。

示例
--


```js
// 假设 <a id="myAnchor" href="https://developer.mozilla.org/en-US/HTMLAnchorElement"> 元素在文档内
const anchor = document.getElementById("myAnchor");
anchor.href; // 返回 'https://developer.mozilla.org/en-US/HTMLAnchorElement'
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-hyperlink-href-dev |

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

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

参见
--

* 所属的 `HTMLAnchorElement` (en-US) 接口。
HTMLAnchorElement.download
==========================

**`HTMLAnchorElement.download`** 属性是一个`DOMString` ，表明链接的资源将被下载，而不是显示在浏览器中。该值表示下载文件的建议名称。如果该名称不是基础操作系统的有效文件名，浏览器将对其进行调整。

**备注：** 该值对于下载行为来说不一定是有用的，同时也不能决定下载行为是否发生。

语法
--
```

var dnload = anchorElt.download;
anchorElt.download = dnload;
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-a-download |

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

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

**`MouseEvent.altKey`** 只读属性是一个`Boolean`变量。当事件触发时，如果`alt` 被按下，则返回 true，否则返回 false。

语法
--
```

var altKeyPressed = instanceOfMouseEvent.altKey
```

示例
--


```js
<html>
<head>
<title>altKey example</title>

<script type="text/javascript">

function showChar(e){
  alert(
    "Key Pressed: " + String.fromCharCode(e.charCode) + "\n"
    + "charCode: " + e.charCode + "\n"
    + "ALT key pressed: " + e.altKey + "\n"
  );
}

</script>
</head>

<body onkeypress="showChar(event);">
<p>
Press any character key,
with or without holding down the ALT key.<br />
You can also use the SHIFT key together with the ALT key.
</p>
</body>
</html>
```

规范
--

| Specification |
| --- |
| UI Events # dom-mouseevent-altkey |

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

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

相关
--

* `MouseEvent`
MouseEvent.pageX
================

**`pageX`** 是一个由 `MouseEvent` 接口返回的相对于整个文档的 x（水平）坐标以像素为单位的只读属性。

这个属性将基于文档的边缘，考虑任何页面的水平方向上的滚动。举个例子，如果页面向右滚动 200px 并出现了滚动条，这部分在窗口之外，然后鼠标点击距离窗口左边 100px 的位置，pageX 所返回的值将是 300。

起初这个属性被定义为长整型。CSSOM 视图模块将它重新定位为双浮点数类型。请参阅浏览器兼容性部分了解详情。

语法
--
```

var pos = event.pageX
```

例子
--
```

var pageX = event.pageX;
```

规范
--

| Specification |
| --- |
| CSSOM View Module # dom-mouseevent-pagex |

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

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

参考
--

* `UIEvent.pageX`
MouseEvent.screenX
==================

**`screenX`** 是 `MouseEvent` 的只读属性，提供鼠标在全局（屏幕）中的水平坐标（偏移量）。

**备注：** 在多屏显示的环境下，水平对齐的屏幕将被视为单个设备，因此 `screenX` 值的范围将增加到屏幕的组合宽度。

值
-

一个双精度浮点数（`double`）。

早期版本的规范将该值定义为整数值的像素数。

示例
--

这个示例展示了当触发 `mousemove` 事件时鼠标的坐标。

### HTML


```html
<p>移动鼠标以查看其坐标。</p>
<p id="screen-log"></p>
```

### JavaScript


```js
let screenLog = document.querySelector("#screen-log");
document.addEventListener("mousemove", logKey);
function logKey(e) {
  screenLog.innerText = `
 屏幕坐标 X/Y: ${e.screenX}, ${e.screenY}
 客户端坐标 X/Y: ${e.clientX}, ${e.clientY}`;
}
```

### 结果

### 路由事件

当你在窗口、文档或其他较大的元素上捕获事件时，可以获取事件的坐标（例如点击事件）然后作出正确的处理，如下所示：


```js
function checkClickMap(e) {
  if (e.screenX < 50) doRedButton();
  if (50 <= e.screenX && e.screenX < 100) doYellowButton();
  if (e.screenX >= 100) doRedButton();
}
```

规范
--

| Specification |
| --- |
| UI Events # dom-mouseevent-screenx |

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

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

参见
--

* `MouseEvent`
* `screenY`
* `clientX` / `clientY`
MouseEvent.x
============

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

**`MouseEvent.x`** 是 `MouseEvent.clientX` 属性的别名。

规范
--

| Specification |
| --- |
| CSSOM View Module # dom-mouseevent-x |

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

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

**`MouseEvent.ctrlKey`** 是只读属性，可返回一个布尔值，当 ctrl 键被按下，返回 true，否则返回 false。

语法
--
```

var ctrlKeyPressed = instanceOfMouseEvent.ctrlKey
```

### 返回值

A boolean

示例
--


```js
<html>
<head>
<title>ctrlKey example</title>

<script type="text/javascript">

function showChar(e){
  alert(
    "Key Pressed: " + String.fromCharCode(e.charCode) + "\n"
    + "charCode: " + e.charCode + "\n"
    + "CTRL key pressed: " + e.ctrlKey + "\n"
  );
}

</script>
</head>

<body onkeypress="showChar(event);">
<p>Press any character key, with or without holding down the CTRL key.<br />
You can also use the SHIFT key together with the CTRL key.</p>
</body>
</html>
```

规范
--

| Specification |
| --- |
| UI Events # dom-mouseevent-ctrlkey |

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

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

相关链接
----

* `MouseEvent`
MouseEvent.clientX
==================

**`MouseEvent.clientX`** 是只读属性，它提供事件发生时的应用客户端区域的水平坐标 (与页面坐标不同)。例如，不论页面是否有水平滚动，当你点击客户端区域的左上角时，鼠标事件的 `clientX` 值都将为 0。最初这个属性被定义为长整型（long integer），如今 **CSSOM** 视图模块将其重新定义为双精度浮点数（double float）。你可以查阅浏览器兼容性部分的文档来进一步了解有关信息。

语法
--
```

var x = instanceOfMouseEvent.clientX
```

### `返回值`

被 CSSOM View Module 重新定义为一个 `double` 类型的浮点值。原来这个属性是被定义为一个 `long` 整数。可以在 "浏览器兼容性" 那里查看详细内容。

示例
--


```html
<!doctype html>
<html>
  <head>
    <title>clientX/clientY example</title>

    <script>
 function showCoords(evt) {
 alert(
 "clientX value: " +
 evt.clientX +
 "\n" +
 "clientY value: " +
 evt.clientY +
 "\n",
 );
 }
 </script>
  </head>
  <body onmousedown="showCoords(event)">
    <p>To display the mouse coordinates click anywhere on the page.</p>
  </body>
</html>
```

规范
--

| Specification |
| --- |
| UI Events # dom-mouseevent-clientx |

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

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

相关
--

* `MouseEvent`
* `clientY`
* `screenX` / `screenY`
MouseEvent.buttons
==================

只读属性 **`MouseEvent.buttons`** 指示事件触发时哪些鼠标按键被按下。

每一个按键都用一个给定的数（见下文）表示。如果同时多个按键被按下，buttons 的值为各键对应值做与计算（+）后的值。例如，如果右键（2）和滚轮键（4）被同时按下，buttons 的值为 2 + 4 = 6。

**备注：** 属性 MouseEvent.button 和 MouseEvent.buttons 是不同的。MouseEvent.buttons 可指示任意鼠标事件中鼠标的按键情况，而 MouseEvent.button 只能保证在由按下和释放一个或多个按键时触发的事件中获得正确的值。

语法
--


```js
var buttonPressed = instanceOfMouseEvent.buttons;
```

返回值
---

一个数字，用来标识鼠标按下的一个或者多个按键。如果按下的键为多个，则值等于所有按键对应数值进行或 (|) 运算的结果。

* `0`: 没有按键或者是没有初始化
* `1`: 鼠标左键
* `2`: 鼠标右键
* `4`: 鼠标滚轮或者是中键
* `8`: 第四按键 (通常是“浏览器后退”按键)
* `16` : 第五按键 (通常是“浏览器前进”)
Specifications
--------------

| Specification |
| --- |
| UI Events # dom-mouseevent-buttons |

Browser compatibility
---------------------

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

See also
--------

* `MouseEvent`
MouseEvent.y
============

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

**`MouseEvent.y`** 属性是 `MouseEvent.clientY` 属性的别称。

规范
--

| Specification |
| --- |
| CSSOM View Module # dom-mouseevent-y |

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

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

**`MouseEvent.clientY`** 是只读属性，它提供事件发生时的应用客户端区域的垂直坐标 (与页面坐标不同)。例如，当你点击客户端区域的左上角时，鼠标事件的 `clientY` 值为 0，这一值与页面是否有垂直滚动无关。

语法
--
```

var y = instanceOfMouseEvent.clientY
```

### Return value

被 CSSOM View Module 重新定义为一个 `double` 类型的浮点值。原来这个属性是被定义为一个 `long` 整数。可以在 "浏览器兼容性" 那里查看详细内容。

### Example


```js
<html>
<head>
<title>clientX\clientY example</title>

<script type="text/javascript">
function showCoords(evt){
  alert(
    "clientX value: " + evt.clientX + "\n"
    + "clientY value: " + evt.clientY + "\n"
  );
}
</script>
</head>

<body onmousedown="showCoords(event)">
<p>To display the mouse coordinates click anywhere on the page.</p>
</body>
</html>
```

规范
--

| Specification |
| --- |
| UI Events # dom-mouseevent-clienty |

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

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

查看更多
----

* `MouseEvent`
* `clientX`
* `screenX` / `screenY`
MouseEvent.button
=================

\*\*`MouseEvent.button`\*\*是只读属性，它返回一个值，代表用户按下并触发了事件的鼠标按键。

这个属性只能够表明在触发事件的单个或多个按键按下或释放过程中哪些按键被按下了。因此，它对判断`mouseenter`, `mouseleave`, `mouseover`, `mouseout` `mousemove`这些事件并不可靠。

用户可能会改变鼠标按键的配置，因此当一个事件的 **`MouseEvent.button`** 值为 0 时，它可能不是由物理上设备最左边的按键触发的。但是对于一个标准按键布局的鼠标来说就会是左键。

**备注：** `MouseEvent.buttons` 属性可指示任意鼠标事件中鼠标的按键情况，因此不要把它和 MouseEvent.button 属性弄混淆了。

语法
--


```js
var buttonPressed = instanceOfMouseEvent.button;
```

### 返回值

一个数值，代表按下的鼠标按键：

* `0`：主按键，通常指鼠标左键或默认值（译者注：如 document.getElementById('a').click() 这样触发就会是默认值）
* `1`：辅助按键，通常指鼠标滚轮中键
* `2`：次按键，通常指鼠标右键
* `3`：第四个按钮，通常指浏览器后退按钮
* `4`：第五个按钮，通常指浏览器的前进按钮

对于配置为左手使用的鼠标，按键操作将正好相反。此种情况下，从右至左读取值。

示例
--

### HTML


```html
<button id="button" oncontextmenu="event.preventDefault();">
  Click here with your mouse...
</button>
<p id="log"></p>
```

### JavaScript


```js
let button = document.querySelector("#button");
let log = document.querySelector("#log");
button.addEventListener("mouseup", logMouseButton);

function logMouseButton(e) {
  if (typeof e === "object") {
    switch (e.button) {
      case 0:
        log.textContent = "Left button clicked.";
        break;
      case 1:
        log.textContent = "Middle button clicked.";
        break;
      case 2:
        log.textContent = "Right button clicked.";
        break;
      default:
        log.textContent = `Unknown button code: ${e.button}`;
    }
  }
}
```

### 结果

规范
--

| Specification |
| --- |
| UI Events # dom-mouseevent-button |

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

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

参阅
--

* `"MouseEvent"`
MouseEvent.pageY
================

**`pageY`** 是一个只读属性，它返回触发事件的位置相对于整个 document 的 Y 坐标值。由于其参考物是整个 dom，所以这个值受页面垂直方向的滚动影响。例如：当你垂直方向向下滚动了 50 pixel，那么你在顶端进行点击的时候，获取的 **`pageY`** 为 50pixed 而不是 0。最初这个属性被定义为长整型（long integer），如今 **CSSOM** 视图模块将其重新定义为双精度浮点数（double float）。你可以查阅浏览器兼容性部分的文档来进一步了解有关信息。

语法
--
```

var pos = event.pageY
```

示例
--
```

var pageY = event.pageY;
```

规范
--

| Specification |
| --- |
| CSSOM View Module # dom-mouseevent-pagey |

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

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

更多请见
----

* `UIEvent.pageY`
MouseEvent()
============

**`MouseEvent()`** 构造器创建一个 `MouseEvent`。

语法
--
```

 event = new MouseEvent(typeArg, mouseEventInit);
```

### 形参

*typeArg*

`DOMString` 格式的事件名称。

*mouseEventInit* 可选

初始化 `MouseEvent` 的字典，有下列属性字段：

* `"screenX"`，`long` 型可选，默认为 `0`，设置鼠标事件发生时相对于用户屏幕的水平坐标位置；该操作并不会改变真实鼠标的位置。
* `"screenY"`，`long` 型可选，默认为 `0`，设置鼠标事件发生时相对于用户屏幕的垂直坐标位置；该操作并不会改变真实鼠标的位置。
* `"clientX"`，`long` 型可选，默认为 `0`，设置鼠标事件时相对于客户端窗口的水平坐标位置；该操作并不会改变真实鼠标的位置。
* `"clientY"`，`long` 型可选，默认为 `0`，设置鼠标事件时相对于客户端窗口的垂直坐标位置；该操作并不会改变真实鼠标的位置。
* `"ctrlKey"`，`Boolean` 型可选，默认为`false`，标明是否同时按下
 `ctrl`
 键。
* `"shiftKey"`，`Boolean` 型可选，默认为`false`，标明是否同时按下
 `shift`
 键。
* `"altKey"`，`Boolean` 型可选，默认为 `false`，标明是否同时按下
 `alt`
 键。
* `"metaKey"`，`Boolean` 型可选，默认为`false`，标明是否同时按下
 `meta`
 键。
* `"button"`，`short` 型可选，默认为 `0`，描述了当事件发生时，哪个按键被按下或释放：


| 值 | 含义 |
| --- | --- |
| `0` | 主按键被按下（通常为左键）或未初始化 |
| `1` | 辅助按键被按下 (通常为中键) |
| `2` | 次按键被按下 (通常为右键) |
* `"buttons"`，无符号 `short` 型可选，默认为 `0`，描述了当事件发生时哪些按键被按下：


| 位域值（Bit-field value） | 含义 |
| --- | --- |
| `0` | 无按键被按下 |
| `1` | 主按键被按下 (通常为左键) |
| `2` | 次按键被按下 (通常为右键) |
| `4` | 辅助按键被按下 (通常为中键) |
* `"relatedTarget"`，`EventTarget` 型可选，默认为 `null`，若事件为 `mouseenter` 或 `mouseover`，则表示刚离开的元素；若事件为 `mouseout` 或 `mouseleave`，则表示刚进入的元素。
* `"region"`，`DOMString` 型可选，默认为`null`，标明点击事件影响的区域 DOM 的 id。不影响任何区域的话，请传`null`值。

在一些实现中，为屏幕和客户端字段传递数值以外的任何东西都会抛出 `TypeError`。

规范
--

| Specification |
| --- |
| UI Events # dom-mouseevent-mouseevent |

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

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

参见
--

* `MouseEvent`，对象结构接口。
MouseEvent.screenY
==================

**`screenY`** 是 `MouseEvent` 的只读属性，提供鼠标在全局（屏幕）中的垂直坐标（偏移量）。

值
-

一个双精度浮点数（`double`）。

早期版本的规范定义将其一个整数值的像素数。

示例
--

这个示例展示了当触发 `mousemove` 事件时鼠标的坐标。

### HTML


```html
<p>移动鼠标以查看其坐标。</p>
<p id="screen-log"></p>
```

### JavaScript


```js
let screenLog = document.querySelector("#screen-log");
document.addEventListener("mousemove", logKey);
function logKey(e) {
  screenLog.innerText = `
 屏幕坐标 X/Y: ${e.screenX}, ${e.screenY}
 客户端坐标 X/Y: ${e.clientX}, ${e.clientY}`;
}
```

### 结果

规范
--

| Specification |
| --- |
| UI Events # dom-mouseevent-screeny |

### 浏览器兼容性

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

参见
--

* `MouseEvent`
* `screenX`
* `clientX` / `clientY`
MouseEvent.offsetY
==================

MouseEvent 接口的只读属性 **offsetY** 规定了事件对象与目标节点的内填充边（padding edge）在 Y 轴方向上的偏移量。

语法
--
```

var yOffset = instanceOfMouseEvent.offsetY;
```

### 返回值

一个`双精度` 浮点值。早期的规范将其规定为整数值。详见浏览器兼容性部分。

规范
--

| Specification |
| --- |
| CSSOM View Module # dom-mouseevent-offsety |

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

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

相关内容
----

* `MouseEvent`
MouseEvent.movementX
====================

**`MouseEvent.movementX`** 是只读属性，它提供了当前事件和上一个`mousemove`事件之间鼠标在水平方向上的移动值。换句话说，这个值是这样计算的 : `currentEvent.movementX = currentEvent.screenX - previousEvent.screenX`.

语法
--
```

var xShift = instanceOfMouseEvent.movementX
```

### 返回值

一个数字

规范
--

| Specification |
| --- |
| Pointer Lock 2.0 # dom-mouseevent-movementx |

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

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

相关
--

* `MouseEvent`
* Pointer Lock (en-US)
MouseEvent.shiftKey
===================

**`MouseEvent.shiftKey`** 是只读属性，指出触发鼠标事件时是否按住了 `shift` 键

Syntax
------
```

var shiftKeyPressed = instanceOfMouseEvent.shiftKey
```

### Return value

A boolean

Example
-------


```js
<html>
<head>
<title>shiftKey example</title>

<script type="text/javascript">

function showChar(e){
  alert(
    "Key Pressed: " + String.fromCharCode(e.charCode) + "\n"
    + "charCode: " + e.charCode + "\n"
    + "SHIFT key pressed: " + e.shiftKey + "\n"
    + "ALT key pressed: " + e.altKey + "\n"
  );
}

</script>
</head>

<body onkeypress="showChar(event);">
<p>Press any character key, with or without holding down
 the SHIFT key.<br />
You can also use the SHIFT key together with the ALT key.</p>
</body>
</html>
```

Specifications
--------------

| Specification |
| --- |
| UI Events # dom-mouseevent-shiftkey |

Browser compatibility
---------------------

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

See also
--------

* `MouseEvent`
MouseEvent.relatedTarget
========================

只读属性 **`MouseEvent.relatedTarget`** 是鼠标事件的次要目标（如果存在），它包括：

| 事件名称 | `target` | `relatedTarget` |
| --- | --- | --- |
| `focusin` (en-US) | `EventTarget` 获取焦点 | `EventTarget` 失去焦点 |
| `focusout` | `EventTarget` 失去焦点 | The `EventTarget` 获取焦点 |
| `mouseenter` | 指针设备进入`EventTarget` | 指针设备离开`EventTarget` |
| `mouseleave` | 指针设备离开 `EventTarget` | 指针设备进入 `EventTarget` |
| `mouseout` | 指针设备离开 `EventTarget` | The `EventTarget` |
| `mouseover` | 指针设备进入 `EventTarget` | 指针设备离开 `EventTarget` |
| `dragenter` | 指针设备进入 `EventTarget` | 指针设备离开 `EventTarget` |

如果事件没有次要目标，`relatedTarget` 将返回 `null`.

语法
--
```

var target = instanceOfMouseEvent.relatedTarget
```

### 返回值

`EventTarget` 对象或者 `null`.

示例
--

尝试将你的鼠标移入移出红色和蓝色方块。

### HTML


```html
<body id="body">
  <div id="outer">
    <div id="red"></div>
    <div id="blue"></div>
  </div>
  <p id="log"></p>
</body>
```

### CSS


```css
#outer {
  width: 250px;
  height: 125px;
  display: flex;
}

#red {
  flex-grow: 1;
  background: red;
}

#blue {
  flex-grow: 1;
  background: blue;
}

#log {
  max-height: 120px;
  overflow-y: scroll;
}
```

### JavaScript


```js
const mouseoutLog = document.getElementById("log"),
  red = document.getElementById("red"),
  blue = document.getElementById("blue");

red.addEventListener("mouseover", overListener);
red.addEventListener("mouseout", outListener);
blue.addEventListener("mouseover", overListener);
blue.addEventListener("mouseout", outListener);

function outListener(event) {
  let related = event.relatedTarget ? event.relatedTarget.id : "unknown";

  mouseoutLog.innerText = `\nfrom ${event.target.id} into ${related} ${mouseoutLog.innerText}`;
}

function overListener(event) {
  let related = event.relatedTarget ? event.relatedTarget.id : "unknown";

  log.innerText = `\ninto ${event.target.id} from ${related} ${mouseoutLog.innerText}`;
}
```

### 结果

规范
--

| Specification |
| --- |
| UI Events # dom-mouseevent-relatedtarget |

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

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

参见
--

* `MouseEvent`
* Comparison of Event Targets (en-US)
MouseEvent.metaKey
==================

**`MouseEvent.metaKey`** 为只读属性，返回一个`布尔值`，在鼠标事件发生时，用于指示 `Meta` 键是按下状态（`true`），还是释放状态（`false`）。

**备注：** 在 MAC 键盘上，表示 Command 键（`⌘`），在 Windows 键盘上，表示 Windows 键（`⊞`）。

语法
--
```

var metaKeyPressed = instanceOfMouseEvent.metaKey
```

### 返回值

一个布尔值。

示例
--


```js
function goInput(e) {
  // 检测 metaKey 值
  if (e.metaKey) {
    // 继续处理事件
    superSizeOutput(e);
  } else {
    doOutput(e);
  }
}
```

规范
--

| Specification |
| --- |
| UI Events # dom-mouseevent-metakey |

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

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

相关链接
----

* `MouseEvent`