Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Demix touch events from GlobalEventHandlers #18110

Merged
merged 1 commit into from
Jul 8, 2022
Merged

Demix touch events from GlobalEventHandlers #18110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions files/en-us/_redirects.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8115,7 +8115,7 @@
/en-US/docs/Web/API/GlobalEventHandlers.onscroll /en-US/docs/Web/API/GlobalEventHandlers/onscroll
/en-US/docs/Web/API/GlobalEventHandlers.onselect /en-US/docs/Web/API/GlobalEventHandlers/onselect
/en-US/docs/Web/API/GlobalEventHandlers.onsubmit /en-US/docs/Web/API/GlobalEventHandlers/onsubmit
/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHanders.ontouchmove /en-US/docs/Web/API/GlobalEventHandlers/ontouchmove
/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHanders.ontouchmove /en-US/docs/Web/API/Element/touchmove_event
/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.oncancel /en-US/docs/Web/API/GlobalEventHandlers/oncancel
/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.oncanplay /en-US/docs/Web/API/HTMLMediaElement/canplay_event
/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.oncanplaythrough /en-US/docs/Web/API/HTMLMediaElement/canplaythrough_event
Expand All @@ -8132,7 +8132,7 @@
/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onmousewheel /en-US/docs/Web/API/GlobalEventHandlers/onmousewheel
/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onpause /en-US/docs/Web/API/GlobalEventHandlers/onpause
/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onplay /en-US/docs/Web/API/GlobalEventHandlers/onplay
/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.ontouchend /en-US/docs/Web/API/GlobalEventHandlers/ontouchend
/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.ontouchend /en-US/docs/Web/API/Element/touchend_event
/en-US/docs/Web/API/GlobalEventHandlers/dragexit_event /en-US/docs/Web/API/Document/dragleave_event
/en-US/docs/Web/API/GlobalEventHandlers/onabort /en-US/docs/Web/API/HTMLMediaElement/abort_event
/en-US/docs/Web/API/GlobalEventHandlers/onblur /en-US/docs/Web/API/Window/blur_event
Expand All @@ -8147,6 +8147,10 @@
/en-US/docs/Web/API/GlobalEventHandlers/onpointerdown/drag /en-US/docs/Web/API/GlobalEventHandlers/ondrag
/en-US/docs/Web/API/GlobalEventHandlers/onreset /en-US/docs/Web/API/HTMLFormElement/reset_event
/en-US/docs/Web/API/GlobalEventHandlers/onresize /en-US/docs/Web/API/Window/resize_event
/en-US/docs/Web/API/GlobalEventHandlers/ontouchcancel /en-US/docs/Web/API/Element/touchcancel_event
/en-US/docs/Web/API/GlobalEventHandlers/ontouchend /en-US/docs/Web/API/Element/touchend_event
/en-US/docs/Web/API/GlobalEventHandlers/ontouchmove /en-US/docs/Web/API/Element/touchmove_event
/en-US/docs/Web/API/GlobalEventHandlers/ontouchstart /en-US/docs/Web/API/Element/touchstart_event
/en-US/docs/Web/API/GlobalFetch/GlobalFetch.fetch() /en-US/docs/Web/API/fetch
/en-US/docs/Web/API/GlobalFetch/fetch /en-US/docs/Web/API/fetch
/en-US/docs/Web/API/Guide/Events/Creating_and_triggering_events /en-US/docs/Web/Events/Creating_and_triggering_events
Expand Down
46 changes: 0 additions & 46 deletions files/en-us/_wikihistory.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45083,52 +45083,6 @@
"alecananian"
]
},
"Web/API/GlobalEventHandlers/ontouchcancel": {
"modified": "2020-11-13T00:52:38.720Z",
"contributors": [
"mfuji09",
"sideshowbarker",
"mfluehr",
"fscholz",
"jpmedley",
"rolfedh",
"AFBarstow"
]
},
"Web/API/GlobalEventHandlers/ontouchend": {
"modified": "2020-11-13T00:35:52.234Z",
"contributors": [
"mfuji09",
"sideshowbarker",
"fscholz",
"jpmedley",
"rolfedh",
"AFBarstow"
]
},
"Web/API/GlobalEventHandlers/ontouchmove": {
"modified": "2020-12-11T12:17:32.413Z",
"contributors": [
"peterbe",
"vmodha",
"sideshowbarker",
"fscholz",
"jpmedley",
"rolfedh",
"AFBarstow"
]
},
"Web/API/GlobalEventHandlers/ontouchstart": {
"modified": "2020-10-15T21:39:43.733Z",
"contributors": [
"sideshowbarker",
"mfluehr",
"fscholz",
"jpmedley",
"rolfedh",
"AFBarstow"
]
},
"Web/API/GlobalEventHandlers/ontransitioncancel": {
"modified": "2020-12-12T15:52:56.127Z",
"contributors": [
Expand Down
61 changes: 38 additions & 23 deletions files/en-us/web/api/document/touchcancel_event/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,28 +15,44 @@ browser-compat: api.Document.touchcancel_event

The `touchcancel` event is fired when one or more touch points have been disrupted in an implementation-specific manner (for example, too many touch points are created).

<table class="properties">
<tbody>
<tr>
<th scope="row">Bubbles</th>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Cancelable</th>
<td>No</td>
</tr>
<tr>
<th scope="row">Interface</th>
<td>{{domxref("TouchEvent")}}</td>
</tr>
<tr>
<th scope="row">Event handler property</th>
<td>
{{ domxref("GlobalEventHandlers.ontouchcancel","ontouchcancel")}}
</td>
</tr>
</tbody>
</table>
## Syntax

Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.

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

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

## Event type

An {{domxref("TouchEvent")}}. Inherits from {{domxref("Event")}}.

{{InheritanceDiagram("TouchEvent")}}

## Event properties

_This interface inherits properties from its parent, {{domxref("UIEvent")}} and {{domxref("Event")}}._

- {{domxref("TouchEvent.altKey")}} {{readonlyInline}}
- : A Boolean value indicating whether or not the alt key was down when the touch event was fired.
- {{domxref("TouchEvent.changedTouches")}} {{readonlyInline}}
- : A {{domxref("TouchList")}} of all the {{domxref("Touch")}} objects representing individual points of contact whose states changed between the previous touch event and this one.
- {{domxref("TouchEvent.ctrlKey")}} {{readonlyInline}}
- : A Boolean value indicating whether or not the control key was down when the touch event was fired.
- {{domxref("TouchEvent.metaKey")}} {{readonlyInline}}
- : A Boolean value indicating whether or not the meta key was down when the touch event was fired.
- {{domxref("TouchEvent.shiftKey")}} {{readonlyInline}}
- : A Boolean value indicating whether or not the shift key was down when the touch event was fired.
- {{domxref("TouchEvent.targetTouches")}}{{readonlyInline}}
- : A {{domxref("TouchList")}} of all the {{domxref("Touch")}} objects that are both currently in contact with the touch surface **and** were also started on the same element that is the target of the event.
- {{domxref("TouchEvent.touches")}} {{readonlyInline}}
- : A {{domxref("TouchList")}} of all the {{domxref("Touch")}} objects representing all current points of contact with the surface, regardless of target or changed status.
- {{domxref("TouchEvent.rotation")}} {{non-standard_inline()}} {{readonlyInline}}
- : Change in rotation (in degrees) since the event's beginning. Positive values indicate clockwise rotation; negative values indicate counterclockwise rotation. Initial value: `0.0`
- {{domxref("TouchEvent.scale")}} {{non-standard_inline()}} {{readonlyInline}}
- : Distance between two digits since the event's beginning. Expressed as a floating-point multiple of the initial distance between the digits at the beginning of the event. Values below 1.0 indicate an inward pinch (zoom out). Values above 1.0 indicate an outward unpinch (zoom in). Initial value: `1.0`

## Examples

Expand All @@ -53,5 +69,4 @@ Code samples for those events are available on the dedicated page: [Touch events
## See also

- [Touch events](/en-US/docs/Web/API/Touch_events)
- {{ domxref("GlobalEventHandlers.ontouchcancel","ontouchcancel")}}
- This event on {{domxref("Element")}} targets: {{domxref("Element/touchcancel_event", "touchcancel")}}
60 changes: 38 additions & 22 deletions files/en-us/web/api/document/touchend_event/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,28 +20,44 @@ browser-compat: api.Document.touchend_event

The `touchend` event fires when one or more touch points are removed from the touch surface.

<table class="properties">
<tbody>
<tr>
<th scope="row">Bubbles</th>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Cancelable</th>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Interface</th>
<td>{{domxref("TouchEvent")}}</td>
</tr>
<tr>
<th scope="row">Event handler property</th>
<td>
{{ domxref("GlobalEventHandlers.ontouchend","ontouchend")}}
</td>
</tr>
</tbody>
</table>
## Syntax

Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.

```js
addEventListener('touchend', (event) => {});

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

## Event type

An {{domxref("TouchEvent")}}. Inherits from {{domxref("Event")}}.

{{InheritanceDiagram("TouchEvent")}}

## Event properties

_This interface inherits properties from its parent, {{domxref("UIEvent")}} and {{domxref("Event")}}._

- {{domxref("TouchEvent.altKey")}} {{readonlyInline}}
- : A Boolean value indicating whether or not the alt key was down when the touch event was fired.
- {{domxref("TouchEvent.changedTouches")}} {{readonlyInline}}
- : A {{domxref("TouchList")}} of all the {{domxref("Touch")}} objects representing individual points of contact whose states changed between the previous touch event and this one.
- {{domxref("TouchEvent.ctrlKey")}} {{readonlyInline}}
- : A Boolean value indicating whether or not the control key was down when the touch event was fired.
- {{domxref("TouchEvent.metaKey")}} {{readonlyInline}}
- : A Boolean value indicating whether or not the meta key was down when the touch event was fired.
- {{domxref("TouchEvent.shiftKey")}} {{readonlyInline}}
- : A Boolean value indicating whether or not the shift key was down when the touch event was fired.
- {{domxref("TouchEvent.targetTouches")}}{{readonlyInline}}
- : A {{domxref("TouchList")}} of all the {{domxref("Touch")}} objects that are both currently in contact with the touch surface **and** were also started on the same element that is the target of the event.
- {{domxref("TouchEvent.touches")}} {{readonlyInline}}
- : A {{domxref("TouchList")}} of all the {{domxref("Touch")}} objects representing all current points of contact with the surface, regardless of target or changed status.
- {{domxref("TouchEvent.rotation")}} {{non-standard_inline()}} {{readonlyInline}}
- : Change in rotation (in degrees) since the event's beginning. Positive values indicate clockwise rotation; negative values indicate counterclockwise rotation. Initial value: `0.0`
- {{domxref("TouchEvent.scale")}} {{non-standard_inline()}} {{readonlyInline}}
- : Distance between two digits since the event's beginning. Expressed as a floating-point multiple of the initial distance between the digits at the beginning of the event. Values below 1.0 indicate an inward pinch (zoom out). Values above 1.0 indicate an outward unpinch (zoom in). Initial value: `1.0`

## Examples

Expand Down
60 changes: 38 additions & 22 deletions files/en-us/web/api/document/touchmove_event/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,28 +21,44 @@ browser-compat: api.Document.touchmove_event

The `touchmove` event is fired when one or more touch points are moved along the touch surface.

<table class="properties">
<tbody>
<tr>
<th scope="row">Bubbles</th>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Cancelable</th>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Interface</th>
<td>{{domxref("TouchEvent")}}</td>
</tr>
<tr>
<th scope="row">Event handler property</th>
<td>
{{ domxref("GlobalEventHandlers.ontouchmove","ontouchmove")}}
</td>
</tr>
</tbody>
</table>
## Syntax

Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.

```js
addEventListener('touchmove', (event) => {});

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

## Event type

An {{domxref("TouchEvent")}}. Inherits from {{domxref("Event")}}.

{{InheritanceDiagram("TouchEvent")}}

## Event properties

_This interface inherits properties from its parent, {{domxref("UIEvent")}} and {{domxref("Event")}}._

- {{domxref("TouchEvent.altKey")}} {{readonlyInline}}
- : A Boolean value indicating whether or not the alt key was down when the touch event was fired.
- {{domxref("TouchEvent.changedTouches")}} {{readonlyInline}}
- : A {{domxref("TouchList")}} of all the {{domxref("Touch")}} objects representing individual points of contact whose states changed between the previous touch event and this one.
- {{domxref("TouchEvent.ctrlKey")}} {{readonlyInline}}
- : A Boolean value indicating whether or not the control key was down when the touch event was fired.
- {{domxref("TouchEvent.metaKey")}} {{readonlyInline}}
- : A Boolean value indicating whether or not the meta key was down when the touch event was fired.
- {{domxref("TouchEvent.shiftKey")}} {{readonlyInline}}
- : A Boolean value indicating whether or not the shift key was down when the touch event was fired.
- {{domxref("TouchEvent.targetTouches")}}{{readonlyInline}}
- : A {{domxref("TouchList")}} of all the {{domxref("Touch")}} objects that are both currently in contact with the touch surface **and** were also started on the same element that is the target of the event.
- {{domxref("TouchEvent.touches")}} {{readonlyInline}}
- : A {{domxref("TouchList")}} of all the {{domxref("Touch")}} objects representing all current points of contact with the surface, regardless of target or changed status.
- {{domxref("TouchEvent.rotation")}} {{non-standard_inline()}} {{readonlyInline}}
- : Change in rotation (in degrees) since the event's beginning. Positive values indicate clockwise rotation; negative values indicate counterclockwise rotation. Initial value: `0.0`
- {{domxref("TouchEvent.scale")}} {{non-standard_inline()}} {{readonlyInline}}
- : Distance between two digits since the event's beginning. Expressed as a floating-point multiple of the initial distance between the digits at the beginning of the event. Values below 1.0 indicate an inward pinch (zoom out). Values above 1.0 indicate an outward unpinch (zoom in). Initial value: `1.0`

## Examples

Expand Down
61 changes: 38 additions & 23 deletions files/en-us/web/api/document/touchstart_event/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,28 +15,44 @@ browser-compat: api.Document.touchstart_event

The `touchstart` event is fired when one or more touch points are placed on the touch surface.

<table class="properties">
<tbody>
<tr>
<th scope="row">Bubbles</th>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Cancelable</th>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Interface</th>
<td>{{domxref("TouchEvent")}}</td>
</tr>
<tr>
<th scope="row">Event handler property</th>
<td>
{{ domxref("GlobalEventHandlers.ontouchstart","ontouchstart")}}
</td>
</tr>
</tbody>
</table>
## Syntax

Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.

```js
addEventListener('touchstart', (event) => {});

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

## Event type

An {{domxref("TouchEvent")}}. Inherits from {{domxref("Event")}}.

{{InheritanceDiagram("TouchEvent")}}

## Event properties

_This interface inherits properties from its parent, {{domxref("UIEvent")}} and {{domxref("Event")}}._

- {{domxref("TouchEvent.altKey")}} {{readonlyInline}}
- : A Boolean value indicating whether or not the alt key was down when the touch event was fired.
- {{domxref("TouchEvent.changedTouches")}} {{readonlyInline}}
- : A {{domxref("TouchList")}} of all the {{domxref("Touch")}} objects representing individual points of contact whose states changed between the previous touch event and this one.
- {{domxref("TouchEvent.ctrlKey")}} {{readonlyInline}}
- : A Boolean value indicating whether or not the control key was down when the touch event was fired.
- {{domxref("TouchEvent.metaKey")}} {{readonlyInline}}
- : A Boolean value indicating whether or not the meta key was down when the touch event was fired.
- {{domxref("TouchEvent.shiftKey")}} {{readonlyInline}}
- : A Boolean value indicating whether or not the shift key was down when the touch event was fired.
- {{domxref("TouchEvent.targetTouches")}}{{readonlyInline}}
- : A {{domxref("TouchList")}} of all the {{domxref("Touch")}} objects that are both currently in contact with the touch surface **and** were also started on the same element that is the target of the event.
- {{domxref("TouchEvent.touches")}} {{readonlyInline}}
- : A {{domxref("TouchList")}} of all the {{domxref("Touch")}} objects representing all current points of contact with the surface, regardless of target or changed status.
- {{domxref("TouchEvent.rotation")}} {{non-standard_inline()}} {{readonlyInline}}
- : Change in rotation (in degrees) since the event's beginning. Positive values indicate clockwise rotation; negative values indicate counterclockwise rotation. Initial value: `0.0`
- {{domxref("TouchEvent.scale")}} {{non-standard_inline()}} {{readonlyInline}}
- : Distance between two digits since the event's beginning. Expressed as a floating-point multiple of the initial distance between the digits at the beginning of the event. Values below 1.0 indicate an inward pinch (zoom out). Values above 1.0 indicate an outward unpinch (zoom in). Initial value: `1.0`

## Examples

Expand All @@ -53,5 +69,4 @@ Code samples for those events are available on the dedicated page: [Touch events
## See also

- [Touch events](/en-US/docs/Web/API/Touch_events)
- {{ domxref("GlobalEventHandlers.ontouchstart","ontouchstart")}}
- This event on [`Element`](/en-US/docs/Web/API/Element) targets: [`touchstart`](/en-US/docs/Web/API/Element/touchstart_event)
Loading