-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
102 lines (76 loc) · 4.23 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
---
title: "Element: pointerup event"
short-title: pointerup
slug: Web/API/Element/pointerup_event
page-type: web-api-event
browser-compat: api.Element.pointerup_event
---
{{APIRef}}
The `pointerup` event is fired when a pointer is no longer active. Remember that it is possible to get a [`pointercancel`](/en-US/docs/Web/API/Element/pointercancel_event) event instead.
## Syntax
Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
```js
addEventListener("pointerup", (event) => {});
onpointerup = (event) => {};
```
## Event type
A {{domxref("PointerEvent")}}. Inherits from {{domxref("Event")}}.
{{InheritanceDiagram("PointerEvent")}}
## Event properties
_This interface inherits properties from {{domxref("MouseEvent")}} and {{domxref("Event")}}._
- {{domxref('PointerEvent.altitudeAngle')}} {{ReadOnlyInline}} {{experimental_inline}}
- : Represents the angle between a transducer (a pointer or stylus) axis and the X-Y plane of a device screen.
- {{domxref('PointerEvent.azimuthAngle')}} {{ReadOnlyInline}} {{experimental_inline}}
- : Represents the angle between the Y-Z plane and the plane containing both the transducer (a pointer or stylus) axis and the Y axis.
- {{domxref('PointerEvent.pointerId')}} {{ReadOnlyInline}}
- : A unique identifier for the pointer causing the event.
- {{domxref('PointerEvent.width')}} {{ReadOnlyInline}}
- : The width (magnitude on the X axis), in CSS pixels, of the contact geometry of the pointer.
- {{domxref('PointerEvent.height')}} {{ReadOnlyInline}}
- : The height (magnitude on the Y axis), in CSS pixels, of the contact geometry of the pointer.
- {{domxref('PointerEvent.pressure')}} {{ReadOnlyInline}}
- : The normalized pressure of the pointer input in the range `0` to `1`, where `0` and `1` represent the minimum and maximum pressure the hardware is capable of detecting, respectively.
- {{domxref('PointerEvent.tangentialPressure')}} {{ReadOnlyInline}}
- : The normalized tangential pressure of the pointer input (also known as barrel pressure or [cylinder stress](https://en.wikipedia.org/wiki/Cylinder_stress)) in the range `-1` to `1`, where `0` is the neutral position of the control.
- {{domxref('PointerEvent.tiltX')}} {{ReadOnlyInline}}
- : The plane angle (in degrees, in the range of `-90` to `90`) between the Y–Z plane and the plane containing both the pointer (e.g. pen stylus) axis and the Y axis.
- {{domxref('PointerEvent.tiltY')}} {{ReadOnlyInline}}
- : The plane angle (in degrees, in the range of `-90` to `90`) between the X–Z plane and the plane containing both the pointer (e.g. pen stylus) axis and the X axis.
- {{domxref('PointerEvent.twist')}} {{ReadOnlyInline}}
- : The clockwise rotation of the pointer (e.g. pen stylus) around its major axis in degrees, with a value in the range `0` to `359`.
- {{domxref('PointerEvent.pointerType')}} {{ReadOnlyInline}}
- : Indicates the device type that caused the event (mouse, pen, touch, etc.).
- {{domxref('PointerEvent.isPrimary')}} {{ReadOnlyInline}}
- : Indicates if the pointer represents the primary pointer of this pointer type.
## Examples
Using `addEventListener()`:
```js
const para = document.querySelector("p");
para.addEventListener("pointerup", (event) => {
console.log("Pointer up");
});
```
Using the `onpointerup` event handler property:
```js
const para = document.querySelector("p");
para.onpointerup = (event) => {
console.log("Pointer up");
};
```
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- Related events
- {{domxref('Element/gotpointercapture_event', 'gotpointercapture')}}
- {{domxref('Element/lostpointercapture_event', 'lostpointercapture')}}
- {{domxref('Element/pointerover_event', 'pointerover')}}
- {{domxref('Element/pointerenter_event', 'pointerenter')}}
- {{domxref('Element/pointerdown_event', 'pointerdown')}}
- {{domxref('Element/pointermove_event', 'pointermove')}}
- {{domxref('Element/pointerup_event', 'pointerup')}}
- {{domxref('Element/pointercancel_event', 'pointercancel')}}
- {{domxref('Element/pointerout_event', 'pointerout')}}
- {{domxref('Element/pointerleave_event', 'pointerleave')}}
- {{domxref('Element/pointerrawupdate_event', 'pointerrawupdate')}}