recursal/MDN huggingface dataset:
HTMLAnchorElement: referrerPolicy property
==========================================

 The
 **`HTMLAnchorElement.referrerPolicy`**
 property reflect the HTML `referrerpolicy` attribute of the
 `<a>` element defining which referrer is sent when fetching the resource.

Value
-----

A string; one of the following:

`no-referrer`

 The `Referer` header will be omitted entirely. No referrer
 information is sent along with requests.


`no-referrer-when-downgrade`

 The URL is sent
 as a referrer when the protocol security level stays the same (e.g.HTTP→HTTP,
 HTTPS→HTTPS), but isn't sent to a less secure destination (e.g. HTTPS→HTTP).


`origin`

 Only send the origin of the document as the referrer in all cases.
 The document `https://example.com/page.html` will send the referrer
 `https://example.com/`.


`origin-when-cross-origin`

 Send a full URL when performing a same-origin request, but only send the origin of
 the document for other cases.


`same-origin`

 A referrer will be sent for same-site origins, but
 cross-origin requests will contain no referrer information.


`strict-origin`

 Only send the origin of the document as the referrer when the protocol security
 level stays the same (e.g. HTTPS→HTTPS), but don't send it to a less secure
 destination (e.g. HTTPS→HTTP).


`strict-origin-when-cross-origin` (default)

 This is the user agent's default behavior if no policy is specified. Send a full URL when performing a same-origin request, only send the origin when the
 protocol security level stays the same (e.g. HTTPS→HTTPS), and send no header to a
 less secure destination (e.g. HTTPS→HTTP).


`unsafe-url`

 Send a full URL when performing a same-origin or cross-origin request. This policy
 will leak origins and paths from TLS-protected resources to insecure origins.
 Carefully consider the impact of this setting.


Examples
--------


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

const div = document.getElementById("divAround");
div.appendChild(elt); // When clicked, the link will not send a referrer header.
```

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

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

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

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

See also
--------

* `HTMLImageElement.referrerPolicy`,
 `HTMLAreaElement.referrerPolicy`, and
 `HTMLIFrameElement.referrerPolicy`.
MouseEvent: WEBKIT\_FORCE\_AT\_MOUSE\_DOWN static property
==========================================================

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

**`MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN`** is a proprietary, WebKit-specific, static numeric property whose value is the minimum force necessary for a normal click.

Because `WEBKIT_FORCE_AT_MOUSE_DOWN` is a static property of `MouseEvent`, you always use it as `MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN`, rather than as a property of a `MouseEvent` instance.

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

*Not part of any specification.* Apple has a description at the Mac Developer Library.

See also
--------

* `MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN`
* `MouseEvent.webkitForce`
MouseEvent: mozInputSource property
===================================

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

 The **`MouseEvent.mozInputSource`** read-only property on `MouseEvent` provides information indicating the type of device that generated the event.
 This lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event).

Value
-----

The following values are possible.

| Constant name | Value | Description |
| --- | --- | --- |
| `MOZ_SOURCE_UNKNOWN` | 0 | The input device is unknown. |
| `MOZ_SOURCE_MOUSE` | 1 | The event was generated by a mouse (or mouse-like device). |
| `MOZ_SOURCE_PEN` | 2 | The event was generated by a pen on a tablet. |
| `MOZ_SOURCE_ERASER` | 3 | The event was generated by an eraser on a tablet. |
| `MOZ_SOURCE_CURSOR` | 4 | The event was generated by a cursor. |
| `MOZ_SOURCE_TOUCH` | 5 | The event was generated on a touch interface. |
| `MOZ_SOURCE_KEYBOARD` | 6 | The event was generated by a keyboard. |

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

Not part of any specification.

See also
--------

* `MouseEvent`
MouseEvent: pageY property
==========================

 The **`pageY`** read-only property of the `MouseEvent` interface returns the Y (vertical) coordinate in pixels of the event relative to the whole document.
 This property takes into account any vertical scrolling of the page.

Value
-----

A `double` floating point value.

Examples
--------


```js
let pageY = event.pageY;
```

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

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

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

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

See also
--------

* `MouseEvent.pageX`
* Coordinate systems
MouseEvent: offsetY property
============================

The **`offsetY`** read-only property of the `MouseEvent` interface provides the offset in the Y coordinate of the mouse pointer between that event and the padding edge of the target node.

Value
-----

A `double` floating point value.

Early versions of the spec defined this as an integer.

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

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

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

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

See also
--------

* `MouseEvent`
* Coordinate systems
MouseEvent: altKey property
===========================

The **`MouseEvent.altKey`** read-only property is a boolean value that indicates whether the `alt` key was pressed or not when a given mouse event occurs.

 Be aware that the browser can't always detect the `alt` key on some operating systems.
 On some Linux variants, for example, a left mouse click combined with the `alt` key is used to move or resize windows.

**Note:** On Macintosh keyboards, this key is also known as the `option` key.

Value
-----

A boolean value, where `true` indicates that the key is pressed, and `false` indicates that the key is *not* pressed.

Examples
--------

This example logs the `altKey` property when you trigger a `click` event.

### HTML


```html
<p>Click anywhere to test the <code>altKey</code> property.</p>
<p id="log"></p>
```

### JavaScript


```js
let log = document.querySelector("#log");
document.addEventListener("click", logKey);

function logKey(e) {
  log.textContent = `The alt key is pressed: ${e.altKey}`;
}
```

### Result

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

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

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

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

See also
--------

* `MouseEvent`
MouseEvent: shiftKey property
=============================

The **`MouseEvent.shiftKey`** read-only property is a boolean value that indicates whether the `shift` key was pressed or not when a given mouse event occurs.

Value
-----

A boolean value, where `true` indicates that the key is pressed, and `false` indicates that the key is *not* pressed.

Examples
--------

This example logs the `shiftKey` property when you trigger a `click` event.

### HTML


```html
<p>Click anywhere to test the <code>shiftKey</code> property.</p>
<p id="log"></p>
```

### JavaScript


```js
let log = document.querySelector("#log");
document.addEventListener("click", logKey);

function logKey(e) {
  log.textContent = `The shift key is pressed: ${e.shiftKey}`;
}
```

### Result

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: offsetX property
============================

The **`offsetX`** read-only property of the `MouseEvent` interface provides the offset in the X coordinate of the mouse pointer between that event and the padding edge of the target node.

Value
-----

A `double` floating point value.

Early versions of the spec defined this as an integer.

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

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

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

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

See also
--------

* `MouseEvent`
* Coordinate systems
MouseEvent: metaKey property
============================

The **`MouseEvent.metaKey`** read-only property is a boolean value that indicates whether the `meta` key was pressed or not when a given mouse event occurs.

 Be aware that many operating systems bind special functionality to the `meta` key, so this property may be `false` even when the key is actually pressed.
 On Windows, for example, this key may open the Start menu.


**Note:** On Macintosh keyboards, this key is the `command` key (`⌘`).
 On Windows keyboards, this key is the Windows key (`⊞`).


Value
-----

A boolean value, where `true` indicates that the key is pressed, and `false` indicates that the key is *not* pressed.

Examples
--------

This example logs the `metaKey` property when you trigger a `click` event.

### HTML


```html
<p>Click anywhere to test the <code>metaKey</code> property.</p>
<p id="log"></p>
```

### JavaScript


```js
let log = document.querySelector("#log");
document.addEventListener("click", logKey);

function logKey(e) {
  log.textContent = `The meta key is pressed: ${e.metaKey}`;
}
```

### Result

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

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

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

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

See also
--------

* `MouseEvent`
MouseEvent: button property
===========================

The **`MouseEvent.button`** read-only property indicates which button was pressed on the mouse to trigger the event.

 This property only guarantees to indicate which buttons are pressed during events caused by pressing or releasing one or multiple buttons.
 As such, it is not reliable for events such as `mouseenter`, `mouseleave`, `mouseover`, `mouseout`, or `mousemove`.

Users may change the configuration of buttons on their pointing device so that if an event's button property is zero, it may not have been caused by the button that is physically left–most on the pointing device; however, it should behave as if the left button was clicked in the standard button layout.

**Note:** Do not confuse this property with the `MouseEvent.buttons` property, which indicates which buttons are pressed for all mouse events types.

Value
-----

A number representing a given button:

* `0`: Main button pressed, usually the left button or the un-initialized
 state
* `1`: Auxiliary button pressed, usually the wheel button or the middle
 button (if present)
* `2`: Secondary button pressed, usually the right button
* `3`: Fourth button, typically the *Browser Back* button
* `4`: Fifth button, typically the *Browser Forward* button

 As noted above, buttons may be configured differently to the standard "left to right" layout.
 A mouse configured for left-handed use may have the button actions reversed.
 Some pointing devices only have one button and use keyboard or other input mechanisms to indicate main, secondary, auxiliary, etc.
 Others may have many buttons mapped to different functions and button values.

Examples
--------

### 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");
button.addEventListener("mouseup", (e) => {
  let log = document.querySelector("#log");
  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}`;
  }
});
```

### Result

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

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

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

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

See also
--------

* `MouseEvent`
MouseEvent: relatedTarget property
==================================

The **`MouseEvent.relatedTarget`** read-only property is the secondary target for the mouse event, if there is one.

That is:

| Event name | `target` | `relatedTarget` |
| --- | --- | --- |
| `mouseenter` | The `EventTarget` the pointing device entered to | The `EventTarget` the pointing device exited from |
| `mouseleave` | The `EventTarget` the pointing device exited from | The `EventTarget` the pointing device entered to |
| `mouseout` | The `EventTarget` the pointing device exited from | The `EventTarget` the pointing device entered to |
| `mouseover` | The `EventTarget` the pointing device entered to | The `EventTarget` the pointing device exited from |
| `dragenter` | The `EventTarget` the pointing device entered to | The `EventTarget` the pointing device exited from |
| `dragleave` | The `EventTarget` the pointing device exited from | The `EventTarget` the pointing device entered to |

 For events with no secondary target, `relatedTarget` returns
 `null`.

`FocusEvent.relatedTarget` is a similar property for focus events.

Value
-----

An `EventTarget` object or `null`.

Examples
--------

Try moving your mouse cursor into and out of the red and blue boxes.

### 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";

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

### Result

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

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

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

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

See also
--------

* `MouseEvent`
* Comparison of Event Targets
MouseEvent: WEBKIT\_FORCE\_AT\_FORCE\_MOUSE\_DOWN static property
=================================================================

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

**`MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN`** is a proprietary, WebKit-specific, static numeric property whose value is the minimum force necessary for a force click.

Because `WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN` is a static property of `MouseEvent`, you always use it as `MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN`, rather than as a property of a `MouseEvent` instance.

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

*Not part of any specification.* Apple has a description at the Mac Developer Library.

See also
--------

* `MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN`
* `MouseEvent.webkitForce`
MouseEvent: ctrlKey property
============================

The **`MouseEvent.ctrlKey`** read-only property is a boolean value that indicates whether the `ctrl` key was pressed or not when a given mouse event occurs.

On Macintosh keyboards, this key is labeled the `control` key. Also, note that on a Mac, a click combined with the `control` key is intercepted by the operating system and used to open a context menu, so `ctrlKey` is not detectable on click events.

Value
-----

A boolean value, where `true` indicates that the key is pressed, and `false` indicates that the key is *not* pressed.

Examples
--------

This example logs the `ctrlKey` property when you trigger a `mousemove` event.

### HTML


```html
<p id="log">The ctrl key was pressed while the cursor was moving: false</p>
```

### JavaScript


```js
const log = document.querySelector("#log");
window.addEventListener("mousemove", logKey);

function logKey(e) {
  log.textContent = `The ctrl key was pressed while the cursor was moving: ${e.ctrlKey}`;
}
```

### Result

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

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

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

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

See also
--------

* `MouseEvent`
MouseEvent: clientX property
============================

The **`clientX`** read-only property of the `MouseEvent` interface provides the horizontal coordinate within the application's viewport at which the event occurred (as opposed to the coordinate within the page).

For example, clicking on the left edge of the viewport will always result in a mouse event with a `clientX` value of `0`, regardless of whether the page is scrolled horizontally.

Value
-----

A `double` floating point value.

Examples
--------

This example displays your mouse's coordinates whenever you trigger the `mousemove` event.

### HTML


```html
<p>Move your mouse to see its position.</p>
<p id="screen-log"></p>
```

### JavaScript


```js
let screenLog = document.querySelector("#screen-log");
document.addEventListener("mousemove", logKey);

function logKey(e) {
  screenLog.innerText = `
 Screen X/Y: ${e.screenX}, ${e.screenY}
 Client X/Y: ${e.clientX}, ${e.clientY}`;
}
```

### Result

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

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

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

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

See also
--------

* `MouseEvent`
* `clientY`
* `screenX` / `screenY`
* Coordinate systems
MouseEvent: movementY property
==============================

 The **`movementY`** read-only property of the `MouseEvent` interface provides the difference in the Y coordinate of the mouse pointer between the given event and the previous `mousemove` event.
 In other words, the value of the property is computed like this: `currentEvent.movementY = currentEvent.screenY - previousEvent.screenY`.

**Warning:** Browsers use different units for `movementY` and `screenY` than what the specification defines. Depending on the browser and operating system, the `movementY` units may be a physical pixel, a logical pixel, or a CSS pixel. You may want to avoid the movement properties, and instead calculate the delta between the current client values (`screenX`, `screenY`) and the previous client values.

Value
-----

A number. Always zero on any `MouseEvent` other than `mousemove`.

Examples
--------

This example logs the amount of mouse movement using `movementX` and `movementY`.

### HTML


```html
<p id="log">Move your mouse around.</p>
```

### JavaScript


```js
function logMovement(event) {
  log.innerText = `movement: ${event.movementX}, ${event.movementY}\n${log.innerText}`;
}

const log = document.getElementById("log");
document.addEventListener("mousemove", logMovement);
```

### Result

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

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

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

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

See also
--------

* `MouseEvent.movementX`
* `MouseEvent`
* Pointer Lock
MouseEvent: webkitForce property
================================

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

**`MouseEvent.webkitForce`** is a proprietary, WebKit-specific numeric property whose value represents the amount of pressure that is being applied on the touchpad or touchscreen.

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

*Not part of any specification.* Apple has a description at the Mac Developer Library.

See also
--------

* `MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN`
* `MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN`
MouseEvent: x property
======================

The **`MouseEvent.x`** property is an alias for the `MouseEvent.clientX` property.

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

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

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

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

The **`screenX`** read-only property of the `MouseEvent` interface provides the horizontal coordinate (offset) of the mouse pointer in screen coordinates.

**Note:** In a multiscreen environment, screens aligned horizontally will be treated as a single device, and so the range of the `screenX` value will increase to the combined width of the screens.

Value
-----

A `double` floating point value.

Early versions of the spec defined this as an integer referring to the number of pixels.

Examples
--------

This example displays your mouse's coordinates whenever you trigger the `mousemove` event.

### HTML


```html
<p>Move your mouse to see its position.</p>
<p id="screen-log"></p>
```

### JavaScript


```js
let screenLog = document.querySelector("#screen-log");
document.addEventListener("mousemove", logKey);

function logKey(e) {
  screenLog.innerText = `
 Screen X/Y: ${e.screenX}, ${e.screenY}
 Client X/Y: ${e.clientX}, ${e.clientY}`;
}
```

### Result

### Routing an event

When you trap events on the window, document, or other roomy elements, you can get the coordinates of that event (e.g., a click) and route it properly, as the following example demonstrates:


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

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

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

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

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

See also
--------

* `MouseEvent`
* `screenY`
* `clientX` / `clientY`
* Coordinate systems