recursal/MDN huggingface dataset:
HTMLElement: dragover イベント
==========================

`dragover` イベントは、要素または選択されたテキストが、妥当なドロップターゲットの上にあるときに（数百ミリ秒間隔で）発生します。

このイベントはドロップターゲットで発生します。

構文
--

このイベント名を `addEventListener()` のようなメソッドで使用するか、イベントハンドラープロパティを設定するかします。


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

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

イベント型
-----

`DragEvent` です。 `Event` を継承しています。

Event

UIEvent

MouseEvent

DragEventイベントプロパティ
---------

*以下に挙げたプロパティに加えて、親である `Event` から継承したプロパティもあります。*

`DragEvent.dataTransfer` 読取専用 

ドラッグ＆ドロップ操作の間に転送されるデータです。

例
-

### 最小限のドラッグ＆ドロップの例

この例では、コンテナーの中にドラッグ可能な要素を入れています。この要素を掴んで、他のコンテナーの上にドラッグし、そして放してみましょう。

ここでは、 3 つのイベントハンドラーを使用しています。

* `dragstart` イベントハンドラーでは、ユーザーがドラッグした要素への参照を取得します。
* ターゲットコンテナーの `dragover` イベント ハンドラーでは、 `event.preventDefault()` を呼び出し、`drop` イベントを受信できるようにします。
* ドロップゾーンの `drop` イベント ハンドラーでは、ドラッグ可能な要素を元のコンテナーからドロップ ゾーンに移動する処理を行います。

ドラッグ＆ドロップのより完全な例については、`drag` イベントのページを参照してください。

#### HTML


```html
<div class="dropzone">
  <div id="draggable" draggable="true">この div はドラッグ可</div>
</div>
<div class="dropzone" id="droptarget"></div>
```


#### CSS


```css
body {
  /\* 例でユーザーがテキストを選択するのを防ぐ \*/
  user-select: none;
}

#draggable {
  text-align: center;
  background: white;
}

.dropzone {
  width: 200px;
  height: 20px;
  background: blueviolet;
  margin: 10px;
  padding: 10px;
}
```


#### JavaScript


```js
let dragged = null;

const source = document.getElementById("draggable");
source.addEventListener("dragstart", (event) => {
  // ドラッグ中の要素の参照を保存
  dragged = event.target;
});

const target = document.getElementById("droptarget");
target.addEventListener("dragover", (event) => {
  // ドロップできるように既定の動作を停止
  event.preventDefault();
});

target.addEventListener("drop", (event) => {
  // 既定の動作（一部の要素でリンクとして開く）を行わないようにする。
  event.preventDefault();
  // ドラッグした要素を選択されたドロップターゲットに移動する
  if (event.target.className === "dropzone") {
    dragged.parentNode.removeChild(dragged);
    event.target.appendChild(dragged);
  }
});
```


#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # ix-handler-ondragover |
| HTML Standard # event-dnd-dragover |

ブラウザーの互換性
---------

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

関連情報
----

* その他のドラッグ＆ドロップイベント:
    + `drag`
    + `dragstart`
    + `dragend`
    + `dragenter`
    + `dragleave`
    + `drop`
* 他を対象としたこのイベント:
    + `Window`: `dragover` イベント
    + `Document`: `dragover` イベント
    + `SVGElement`: `dragover` イベント
HTMLElement: toggle イベント
========================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`toggle`** は `HTMLElement` インターフェイスのイベントで、ポップオーバー要素（すなわち有効な `popover` 属性がある要素）において、表示または非表示になった直後に発行されます。

* そのポップオーバー要素が非表示状態から表示状態に遷移した場合、`event.oldState` プロパティは `closed` に、`event.newState` プロパティは `open` にそれぞれ設定されます。
* そのポップオーバー要素が表示状態から非表示状態に遷移した場合、 `event.oldState` は `open` に、 `event.newState` は `closed` になります。

**メモ:** `toggle` イベントは `<details>` 要素で発行された場合、異なる形で動作します。この場合、ポップオーバーとは関連しておらず、`<details>` 要素の `open`/`closed` 状態が切り替わったときに発行されます。詳しくは `HTMLDetailsElement` の `toggle イベント`のページを参照してください。

構文
--

このイベント名を `addEventListener()` 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


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

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

イベント型
-----

`ToggleEvent` です。`Event` から継承しています。

Event

ToggleEvent例
-

### 基本的な例


```js
const popover = document.getElementById("mypopover");

// ...

popover.addEventListener("toggle", (event) => {
  if (event.newState === "open") {
    console.log("Popover has been shown");
  } else {
    console.log("Popover has been hidden");
  }
});
```

### トグルイベントの合体に関するメモ

`toggle` イベントが合体していることを特筆に値するでしょう。イベントループが循環する前に複数の `toggle` イベントが発行された場合、単一のイベントしか発行されないということです。

例えば次のようになります。


```js
popover.addEventListener("toggle", () => {
  //...
});

popover.showPopover();
popover.hidePopover();
// `toggle` は 1 回しか発行されない
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-toggle |

ブラウザーの互換性
---------

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

関連情報
----

* ポップオーバー API
* 関連イベント: `beforetoggle`
HTMLElement: offsetWidth プロパティ
==============================

**`HTMLElement.offsetWidth`** は読み取り専用プロパティで、要素のレイアウト幅を整数として返します。

通常、 `offsetWidth` は、境界線、パディング、および垂直スクロールバー（レンダリングされている場合）を含む、要素の CSS における幅のピクセル単位の計測値です。 `::before` や `::after` などの擬似要素の幅は含まれません。

要素が非表示の場合、（例えば、要素またはその祖先のいずれかで `style.display` を `"none"` に設定している場合） `0` が返されます。

値
-

要素の `offsetWidth` ピクセル値に対応する整数です。 `offsetWidth` プロパティは読み取り専用です。

**メモ:** このプロパティは、値を整数に丸めます。 小数値が必要な場合は、`element.getBoundingClientRect()` を使用してください。

例
-

![大きなパディング、境界、マージンを持つ要素の例です。offsetWidth` は、パディングと境界を含み、マージンを除いた要素のレイアウト幅である。](/ja/docs/Web/API/HTMLElement/offsetWidth/dimensions-offset.png)

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-htmlelement-offsetwidth |

### メモ

`offsetWidth` は、MSIE によって最初に導入された DHTML オブジェクトモデルのプロパティです。 要素の物理的/グラフィカルな寸法、または要素の境界ボックスの幅 (border-box width) と呼ばれることもあります。

ブラウザーの互換性
---------

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

関連情報
----

* `Element.clientWidth`
* `Element.scrollWidth`
* 要素の寸法の決定
HTMLElement: tabIndex プロパティ
===========================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2018.

* Learn more
* See full compatibility
* Report feedback
**`tabIndex`** は `HTMLElement` インターフェイスのプロパティで、現在の要素のタブの順序を表します。

タブの順序は次のとおりです。

1. 正の `tabIndex` を持つ要素。 同一の `tabIndex` を持つ要素は、表示された順序でナビゲートすべきです。 ナビゲーションは、最も低い `tabIndex` から最も高い `tabIndex` に進みます。
2. `tabIndex` 属性に対応していない要素、または `tabIndex` 属性に対応しており、 `tabIndex` を `0` に割り当てる要素は、それらが表示された順序で。

無効になっている要素は、タブの順序に関与しません。

値は逐次的である必要はなく、特定の値で始まる必要もありません。 各ブラウザーは非常に大きな値を切り取りますが、値は負の値にすることもできます。

構文
--

整数です。

例
-


```js
const b1 = document.getElementById("button1");

b1.tabIndex = 1;
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-tabindex |

ブラウザーの互換性
---------

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

関連情報
----

* キーボードでナビゲート可能な JavaScript ウィジェットのアクセシビリティ
* HTML の `tabindex` グローバル属性
HTMLElement: cut イベント
=====================

**`cut`** イベントは、ユーザーがブラウザーのユーザーインターフェイスから切り取り操作を行おうとした時に発行されます。

構文
--

このイベント名を `addEventListener()` のようなメソッドで使用するか、イベントハンドラープロパティを設定するかします。


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

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

イベント型
-----

`ClipboardEvent` です。 `Event` を継承しています。

Event

ClipboardEventイベントプロパティ
---------

*親である `Event` から継承したプロパティもあります。*

`ClipboardEvent.clipboardData` 読取専用 

`DataTransfer` オブジェクトで、ユーザーが行った `cut`, `copy`, `paste` 操作によって影響されたデータと MIME タイプが入ります。

例
-

この例では、テキストを `<textarea>` からコピーすることはできますが、テキストを切り取りすることはできません。また、コピーと切り取りをしようとしたことをそれぞれ記録します。

### HTML


```html
<h3>このテキストエリアで実行しましょう。</h3>
<textarea id="editor" rows="3">
このフィールド内でテキストのコピーや切り取りをしてみましょう。
</textarea>

<h3>ログ:</h3>
<p id="log"></p>
```

### JavaScript


```js
function logCopy(event) {
  log.innerText = `Copied!\n${log.innerText}`;
}

function preventCut(event) {
  event.preventDefault();
  log.innerText = `Cut blocked!\n${log.innerText}`;
}

const editor = document.getElementById("editor");
const log = document.getElementById("log");

editor.oncopy = logCopy;
editor.oncut = preventCut;
```

### 結果

仕様書
---

| Specification |
| --- |
| Clipboard API and events # clipboard-event-cut |
| HTML Standard # handler-oncut |

ブラウザーの互換性
---------

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

関連情報
----

* 関連イベント
    + `HTMLElement.copy_event`
    + `HTMLElement.paste_event`
HTMLElement: autofocus プロパティ
============================

**`autofocus`** は `HTMLElement` のプロパティで、HTML の `autofocus` 属性を反映した論理値で、ページが読み込まれた時、または、 `<dialog>` 要素やポップオーバー属性が設定された要素の中で指定された場合は、ダイアログやポップオーバーが表示された時に、コントロールにフォーカスを当てるかどうかを表します。

この属性を指定することができるのは、1 つの文書内、または `<dialog>` 要素内、または `popover` 属性が設定された要素内のフォーム関連要素 1 つだけです。もし複数あった場合、属性が設定された最初の要素（通常は該当する要素のうちページで最初のもの）が初期のフォーカスを得ます。

**メモ:** このプロパティを設定しても、関連付けられた `<select>` 要素へフォーカスは設定されません。単純に文書へ*要素が挿入された*ときにブラウザーへフォーカスを移動するよう指示するだけです。挿入後に設定した場合、すなわち文書が読み込まれた後のほとんどの場合では、目に見える効果はありません。

値
-

論理値です。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-fe-autofocus |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLElement: offsetParent プロパティ
===============================

**`HTMLElement.offsetParent`** は読み取り専用プロパティで、最も近くにある（包含階層で最も近い）位置指定された祖先要素である要素への参照を返します。

位置指定された祖先とは、次のどちらかです。

* 静的配置ではない要素
* 要素自体が静的配置である場合の `td`、`th`、`table`

位置指定された祖先要素がない場合は、`body` を返します。

**メモ:** 次の状況では、`offsetParent` は `null` を返します。

* 要素またはその親要素の `display` プロパティが `none` に設定されている。
* 要素の `position` プロパティが `fixed`（固定位置指定）に設定されている（Firefox は `<body>` を返します）。
* 要素が `<body>` または `<html>` 要素である。

`offsetParent` が有用なのは、`offsetTop` と `offsetLeft` がパディング辺からの相対位置だからです。

値
-

現在の要素がオフセットされている要素へのオブジェクト参照です。

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-htmlelement-offsetparent |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLElement: change イベント
========================

`change` イベントは `<input>`, `<select>`, `<textarea>` 要素において、ユーザーが要素の値を変更したときに発行されます。 `input` イベントとは異なり、 `change` イベントは要素の値 (`value`) が変更されるたびに発生するとは限りません。

変更される要素の種類やユーザーが要素を操作する方法によって、 `change` イベントは異なる時点で発行されます。

* `<input type="checkbox">` 要素が（クリックやキーボードを使用して）チェックされたり解除されたりした場合
* `<input type="radio">` 要素がチェックされた場合（ただし解除された場合は発行されない）
* ユーザが明示的に変更を確定したとき（たとえば、 `<select>` のドロップダウンの値をマウスクリックで選択した場合、 `<input type="date">` の日付ピッカーで日付を選択した場合、 `<input type="file">` のファイル選択ダイアログでファイルを選択した場合など）。
* 要素の値が変更された後、その要素のフォーカスが失われたとき。ユーザーの操作が選択ではなく入力である要素、例えば `<textarea>` や `<input>` 要素の `text`, `search`, `url`, `tel`, `email`, `password` 型の要素で発生します。

HTML 仕様書には、 `change` イベントを発生させる `<input>` 型の一覧があります。

構文
--

このイベント名を `addEventListener()` 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


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

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

イベント型
-----

一般的な `Event` です。

例
-

### <select> 要素

#### HTML


```html
<label>
  アイスクリームの味を選択してください。
  <select class="ice-cream" name="ice-cream">
    <option value="">1 つ選択してください …</option>
    <option value="chocolate">チョコレート</option>
    <option value="sardine">イワシ</option>
    <option value="vanilla">バニラ</option>
  </select>
</label>

<div class="result"></div>
```


```
body {
  display: grid;
  grid-template-areas: "select result";
}

select {
  grid-area: select;
}

.result {
  grid-area: result;
}
```


#### JavaScript


```js
const selectElement = document.querySelector(".ice-cream");
const result = document.querySelector(".result");

selectElement.addEventListener("change", (event) => {
  const result = document.querySelector(".result");
  result.textContent = `${event.target.value}が好きですね`;
});
```


#### 結果

### テキスト入力要素

`<input type="text">` など一部の要素では、コントロールがフォーカスを失うまで `change` イベントが発生しません。以下のフィールドに何かを入力してから、他の部分をクリックするとイベントが発行されます。

#### HTML


```html
<input placeholder="何かテキストを入力" name="name" />
<p id="log"></p>
```


#### JavaScript


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

input.addEventListener("change", updateValue);

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


#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # event-change |
| HTML Standard # handler-onchange |

ブラウザーの互換性
---------

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

すべてのブラウザーにおいて、特定の操作で `change` イベントが発生するかどうかが同じであるとは限りません。例えば、 Gecko では `<select>` 要素をキーボードで操作すると、 `change` イベントは Enter を押すか `<select>` からフォーカスが離れるまで発生しませんでした（Firefox バグ 126379 を参照）。ただし、 Firefox 63 (Quantum) からは、すべての主要なブラウザーと同じ動作になりました。
HTMLElement: paste イベント
=======================

**`paste`** イベントは、ユーザーがブラウザーのユーザーインターフェイスから貼り付け操作を行おうとした時に発行されます。

構文
--

このイベント名を `addEventListener()` のようなメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


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

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

イベント型
-----

`ClipboardEvent` です。 `Event` を継承しています。

Event

ClipboardEventイベントプロパティ
---------

*親である `Event` から継承したプロパティもあります。*

`ClipboardEvent.clipboardData` 読取専用 

`DataTransfer` オブジェクトで、ユーザーが行った `cut`, `copy`, `paste` 操作によって影響されたデータと MIME タイプが入ります。

例
-

この例では、 `<textarea>` からのすべてのコピーと貼り付けを記録します。

### HTML


```html
<h3>このテキストエリアで実行してみる</h3>
<textarea id="editor" rows="3">
このフィールドにテキストをコピー＆ペーストしてみてください。
</textarea>

<h3>ログ:</h3>
<p id="log"></p>
```

### JavaScript


```js
function logCopy(event) {
  log.innerText = `コピーされました。\n${log.innerText}`;
}

function logPaste(event) {
  log.innerText = `貼り付けされました。\n${log.innerText}`;
}

const editor = document.getElementById("editor");
const log = document.getElementById("log");

editor.oncopy = logCopy;
editor.onpaste = logPaste;
```

### 結果

仕様書
---

| Specification |
| --- |
| Clipboard API and events # clipboard-event-paste |
| HTML Standard # handler-onpaste |

ブラウザーの互換性
---------

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

関連情報
----

* 関連イベント:
    + `HTMLElement.copy_event`
    + `HTMLElement.cut_event`
HTMLElement: error イベント
=======================

`error` イベントは、リソースの読み取りに失敗したり、使用できなかったりした場合に要素に発生します。例えば、スクリプトの実行エラーがあったり、画像が見つからないか無効であった場合などです。

このイベントはキャンセル不可で、バブリングしません。

構文
--

このイベント名を `addEventListener()` のようなメソッドで使用するか、イベントハンドラープロパティを設定するかします。


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

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

イベント型
-----

イベントオブジェクトは、ユーザーインターフェイス要素から生成された場合は `UIEvent` のインスタンスとなり、それ以外の場合は `Event` となります。

Event

UIEvent例
-

### ライブデモ

#### HTML


```html
<div class="controls">
  <button id="img-error" type="button">Generate image error</button>
  <img class="bad-img" />
</div>

<div class="event-log">
  <label for="eventLog">Event log:</label>
  <textarea
 readonly
 class="event-log-contents"
 rows="8"
 cols="30"
 id="eventLog"></textarea>
</div>
```


```
body {
  display: grid;
  grid-template-areas: "control log";
}

.controls {
  grid-area: control;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-log {
  grid-area: log;
}

.event-log-contents {
  resize: none;
}

label,
button {
  display: block;
}

button {
  height: 2rem;
  margin: 0.5rem;
}

img {
  width: 0;
  height: 0;
}
```


#### JavaScript


```js
const log = document.querySelector(".event-log-contents");

const badImg = document.querySelector(".bad-img");
badImg.addEventListener("error", (event) => {
  log.textContent += `${event.type}: Loading image\n`;
  console.log(event);
});

const imgError = document.querySelector("#img-error");
imgError.addEventListener("click", () => {
  badImg.setAttribute("src", "i-dont-exist");
});
```


#### 結果

仕様書
---

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

ブラウザーの互換性
---------

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

関連情報
----

* 関連イベント:
    + Window: `error` イベント
    + HTMLElement: `load` イベント
HTMLElement: offsetLeft プロパティ
=============================

**`HTMLElement.offsetLeft`** プロパティは読み取り専用で、現在の要素の*左上隅*が `HTMLElement.offsetParent` ノード内で左へオフセットされるピクセル数を返します。

ブロックレベル要素では、 `offsetTop`, `offsetLeft`, `offsetWidth`, `offsetHeight` が `offsetParent` からの相対的な要素の境界ボックスを記述します。

しかし、 (**span** などの) インラインレベル要素は行をまたいで折り返すことがあるので、 `offsetTop` および `offsetLeft` は*最初の*境界ボックス (その幅と高さを取得するには `Element.getClientRects()` を使用) の位置を記述するのに対し、 `offsetWidth` および `offsetHeight` は*囲む*境界ボックス (位置を取得するには `Element.getBoundingClientRect()` を使用) の寸法を記述します。したがって、 `offsetLeft`, `offsetTop`, `offsetWidth`, `offsetHeight` による左、上、幅、高さは折り返されたテキストの区間を囲むボックスにはなりません。

値
-

整数です。

例
-


```js
const colorTable = document.getElementById("t1");
const tOLeft = colorTable.offsetLeft;

if (tOLeft > 5) {
  // large left offset: do something here
}
```


この例は、 div 内で折り返す「長い」文を青い境界線で表示し、 span の境界を記述すると考えられるものを赤いボックスで表示します。

![Short span. という文があります。このテキストは青い境界の div に完全に収まっています。Long span that wraps within this div. という文があります。"long span that wraps" の部分は赤い境界のボックスに入っています。"within this div" の部分は青い境界の div の中に入っています。](/ja/docs/Web/API/HTMLElement/offsetLeft/offsetleft.jpg)


```html
<div
 style="width: 300px; border-color:blue; border-style:solid; border-width:1;">
  <span>Short span. </span>
  <span id="longspan">Long span that wraps within this div.</span>
</div>

<div
 id="box"
 style="position: absolute; border-color: red; border-width: 1; border-style: solid; z-index: 10"></div>

<script>
 const box = document.getElementById("box");
 const longspan = document.getElementById("longspan");
 box.style.left = longspan.offsetLeft + document.body.scrollLeft + "px";
 box.style.top = longspan.offsetTop + document.body.scrollTop + "px";
 box.style.width = longspan.offsetWidth + "px";
 box.style.height = longspan.offsetHeight + "px";
</script>
```

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-htmlelement-offsetleft |

ブラウザーの互換性
---------

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

関連情報
----

* `HTMLElement.offsetParent`, `HTMLElement.offsetTop`, `HTMLElement.offsetWidth`, `HTMLElement.offsetHeight`
Touch: radiusY プロパティ
====================

**`radiusY`** は `Touch` インターフェイスの読み取り専用プロパティで、タッチ面の連絡先を最も近く囲む楕円の Y 半径を返します。値は `Touch.screenX` と同じ倍率の CSS のピクセル値です。

この値と `Touch.radiusX` および `Touch.rotationAngle` の組み合わせにより、ユーザーと画面の接触領域のサイズと図形を近似した楕円が構成されます。これは、例えば、指先と画面の間の接触を表す大きな楕円であったり、スタイラスの先端を表す小さな領域であったりします。

値
-

数値です。

例
-

このプロパティの使い方の例については Touch.radiusX の例 を参照してください。

仕様書
---

| Specification |
| --- |
| Touch Events # dom-touch-radiusy |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Touch: pageY プロパティ
==================

**`Touch.pageY`** は読み取り専用プロパティで、スクロールオフセットを加味した、ビューポートに対するタッチ点の Y 座標を返します。

### 値

`double` 型の浮動小数点数で、スクロールオフセットを加味した、ビューポートに対するタッチ点の Y 座標を表します。

例
-

この例では、 `Touch` オブジェクトの `Touch.pageX` および `Touch.pageY` プロパティへのアクセス方法を示しています。 `Touch.pageX` プロパティは、ビューポートを基準としたタッチ点の水平座標（CSS ピクセル単位）で、スクロールオフセットを加味したものです。 `Touch.pageY` プロパティは、ブラウザーのビューポートを基準としたタッチ点の垂直座標（CSS ピクセル単位）で、スクロールオフセットを加味したものです。

以下の単純なコードスニペットでは、ユーザーが `source` 要素に 1 つ以上のタッチ接触を開始し、タッチ点を移動させた後、表面との接触をすべて解除することを想定しています。 `touchmove` イベントハンドラーが呼び出されると、各タッチ点の `Touch.pageX` と `Touch.pageY` の各座標がイベントの `TouchEvent.changedTouches` リスト経由でアクセスされます。


```js
// 'source' 要素に touchmove リスナーを登録する
const src = document.getElementById("source");

src.addEventListener(
  "touchmove",
  (e) => {
    // 移動されたタッチ点を反復処理し、各 pageX/Y 座標をログ出力する。
    // 各座標は CSS ピクセル単位。
    for (let i = 0; i < e.changedTouches.length; i++) {
      console.log(`touchpoint[${i}].pageX = ${e.changedTouches[i].pageX}`);
      console.log(`touchpoint[${i}].pageY = ${e.changedTouches[i].pageY}`);
    }
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| Touch Events # dom-touch-pagey |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Touch: radiusX プロパティ
====================

**`radiusX`** は `Touch` インターフェイスの読み取り専用プロパティで、タッチ面の連絡先を最も近く囲む楕円の X 半径を返します。値は `Touch.screenX` と同じ倍率の CSS のピクセル値です。

この値と `Touch.radiusY` および `Touch.rotationAngle` の組み合わせにより、ユーザーと画面の接触領域のサイズと図形を近似した楕円が構成されます。これは、例えば、指先と画面の間の接触を表す比較的大きな楕円であったり、スタイラスの先端を表す小さな領域であったりします。

値
-

数値です。

例
-

この例では、 `Touch` インターフェイスの `Touch.radiusX`、`Touch.radiusX`、`Touch.rotationAngle` プロパティを使用する例を示します。 `Touch.radiusX` プロパティは、タッチ領域（指やスタイラスなど）を最も近く囲む楕円の、タッチ点の `Touch.rotationAngle` が**示す**軸上の半径です。同様に `Touch.radiusY` プロパティは、タッチ領域（指やスタイラスなど）を最も近く囲む楕円の、 `Touch.rotationAngle` で示される線に**直交する**軸の半径です。 `Touch.rotationAngle` は、 `radiusX` と `radiusY` で記述されている楕円を、その中心に対して時計回りに回転させたときの角度（度）です。

以下の単純なコードでは、 `touchstart`、`touchmove`、`touchend` イベントに対して単一のハンドラーを登録しています。 `src` 要素がタッチされると、タッチ点の `radiusX` と `radiusY` の値に基づいて要素の幅と高さが計算され、タッチ点の `rotationAngle` を使用して要素が回転します。


```html
<div id="src">…</div>
```



```js
const src = document.getElementById("src");

src.addEventListener("touchstart", rotate);
src.addEventListener("touchmove", rotate);
src.addEventListener("touchend", rotate);

function rotate(e) {
  const touch = e.changedTouches.item(0);

  // 既定のイベント処理を無効にする
  e.preventDefault();

  // 'src' 要素を回転する
  src.style.width = `${touch.radiusX \* 2}px`;
  src.style.height = `${touch.radiusY \* 2}px`;
  src.style.transform = `rotate(${touch.rotationAngle}deg)`;
}
```

仕様書
---

| Specification |
| --- |
| Touch Events # dom-touch-radiusx |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Touch: pageX プロパティ
==================

**`Touch.pageX`** は読み取り専用プロパティで、スクロールオフセットを加味した、ビューポートに対するタッチ点の X 座標を返します。

### 値

`double` 型の浮動小数点数で、スクロールオフセットを加味した、ビューポートに対するタッチ点の X 座標を表します。

例
-

この例では、 `Touch` オブジェクトの `Touch.pageX` および `Touch.pageY` プロパティへのアクセス方法を示しています。 `Touch.pageX` プロパティは、ビューポートを基準としたタッチ点の水平座標（CSS ピクセル単位）で、スクロールオフセットを加味したものです。 `Touch.pageY` プロパティは、ブラウザーのビューポートを基準としたタッチ点の垂直座標（CSS ピクセル単位）で、スクロールオフセットを加味したものです。

以下の単純なコードスニペットでは、ユーザーが `source` 要素に 1 つ以上のタッチ接触を開始し、タッチ点を移動させた後、表面との接触をすべて解除することを想定しています。 `touchmove` イベントハンドラーが呼び出されると、各タッチ点の `Touch.pageX` と `Touch.pageY` の各座標がイベントの `TouchEvent.changedTouches` リスト経由でアクセスされます。


```js
// 'source' 要素に touchmove リスナーを登録する
const src = document.getElementById("source");

src.addEventListener(
  "touchmove",
  (e) => {
    // 移動されたタッチ点を反復処理し、各 pageX/Y 座標をログ出力する。
    // 各座標は CSS ピクセル単位。
    for (let i = 0; i < e.changedTouches.length; i++) {
      console.log(`touchpoint[${i}].pageX = ${e.changedTouches[i].pageX}`);
      console.log(`touchpoint[${i}].pageY = ${e.changedTouches[i].pageY}`);
    }
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| Touch Events # dom-touch-pagex |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Touch: Touch() コンストラクター
=======================

**`Touch()`** コンストラクターは、新しい `Touch` オブジェクトを作成します。

構文
--


```js
new Touch(options)
```

### 引数

`touchInit`

以下のフィールドを持つオブジェクトです。

`identifier`

`long` 値で、タッチ点の識別番号です。

`target`

`EventTarget` オブジェクトで、タッチ点が最初に表面に置かれたときに開始したアイテムです。

`clientX` 省略可

既定値は `0`、型は `double` で、スクロールオフセットを除いた、ユーザー画面のクライアントウィンドウ上のタッチの水平位置です。

`clientY` 省略可

既定値は `0`、型は `double` で、スクロールオフセットを除いた、ユーザー画面のクライアントウィンドウ上のタッチの垂直位置です。

`screenX` 省略可

既定値は `0`、型は `double` で、ユーザーの画面上のタッチの水平位置です。

`screenY` 省略可

既定値は `0`、型は `double` で、ユーザーの画面上のタッチの垂直位置です。

`pageX` 省略可

既定値は `0`、型は `double` で、スクロールオフセットを含む、ユーザー画面のクライアントウィンドウ上のタッチの水平位置です。

`pageY` 省略可

既定値は `0`、型は `double` で、スクロールオフセットを含む、ユーザー画面のクライアントウィンドウ上でのタッチの垂直位置です。

`radiusX` 省略可

既定値は `0`、型は `float` で、 rotationAngle で示される軸に沿ったタッチ領域（指やスタイラスなど）を最も近く囲む楕円の半径を、screenX と同じ倍率の CSS ピクセル単位で指定します。値が不明な場合は `0` です。値は負であってはいけません。

`radiusY` 省略可

既定値は `0` で、タイプは `float` です。rotationAngle で示される軸に垂直な軸に沿って、タッチエリア（指やスタイラスなど）を最も近く囲む楕円の半径を、screenY と同じ倍率の CSS ピクセル単位で指定します。値が不明な場合は `0` です。値は負であってはいけません。

`rotationAngle` 省略可

既定値は `0` 、型は `float` で、 radiusX と radiusY で記述する楕円を、その中心を軸に時計回りに回転させた角度（度単位）です。値は `0` 以上、`90` 以下でなければなりません。radiusX と radiusY で記述される楕円が円の場合、 rotationAngle は影響しません。ユーザーエージェントはこの用途の値として `0` を使用してもよいですし、許容範囲内の他の値を使用してもかまいません。（例えば、ユーザーエージェントは突然の変化を避けるために、前回のタッチイベントの rotationAngle 値を使用することができます。）

`force` 省略可

既定値は `0`、型は `float` で、加えられる圧力の相対値です。範囲は `0` から `1` で、 `0` は圧力なし、 `1` はそのタッチ機器が感知できる最高レベルの圧力です。値が不明の場合は `0` です。力が既知である環境では、力属性によって表される絶対圧と、圧力のレベルの感度が異なる場合があります。


仕様書
---

| Specification |
| --- |
| Touch Events # dom-touch-constructor |

ブラウザーの互換性
---------

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

関連情報
----

* `TouchEvent`: これを構築するオブジェクトのインターフェイス