このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
Element: setCapture() メソッド
非推奨;: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。
非標準: この機能は標準化されていません。非標準の機能はブラウザーの対応が限られ、将来的に変更または削除される可能性があるため、本番環境での使用は推奨されません。ただし、標準の選択肢が存在しない特定のケースでは、有効な代替手段となる場合があります。
mousedown イベントの処理中にこのメソッドを呼び出すと、マウスボタンが離されるか document.releaseCapture() が呼び出されるまで、この要素にすべてのマウスイベントを捕捉します。
警告:
このインターフェイスにはブラウザー間の対応がほとんどありませんでした。おそらくお探しのものは element.setPointerCapture (ポインターイベント API)でしょう。
構文
setCapture(retargetToElement)
引数
retargetToElement-
もし
trueならば、すべてのイベントはこの要素に直接向けられます。もしfalseならば、イベントはこの要素の子孫にも発行されることがあります。
返値
なし (undefined)。
例
この例では、現在のマウスの座標が、要素をクリックして押した後にマウスを移動しながら描画されます。
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Mouse Capture Example</title>
<style>
#myButton {
border: solid black 1px;
color: black;
padding: 2px;
box-shadow: black 2px 2px;
}
</style>
<script>
function init() {
const btn = document.getElementById("myButton");
if (btn.setCapture) {
btn.addEventListener("mousedown", mouseDown, false);
btn.addEventListener("mouseup", mouseUp, false);
} else {
document.getElementById("output").textContent =
"Sorry, there appears to be no setCapture support on this browser";
}
}
function mouseDown(e) {
e.target.setCapture();
e.target.addEventListener("mousemove", mouseMoved, false);
}
function mouseUp(e) {
e.target.removeEventListener("mousemove", mouseMoved, false);
}
function mouseMoved(e) {
const output = document.getElementById("output");
output.textContent = `Position: ${e.clientX}, ${e.clientY}`;
}
</script>
</head>
<body onload="init()">
<p>
This is an example of how to use mouse capture on elements in Gecko 2.0.
</p>
<p><a id="myButton" href="#">Test Me</a></p>
<div id="output">No events yet</div>
</body>
</html>
メモ
他の要素のレイアウトによっては、完全に上下にスクロールされない場合があります。
仕様書
どの仕様書にも含まれていません。
ブラウザーの互換性
Loading...