記事ディレクトリ
MouseEventのイベントクラス
シリアルナンバー イベント 説明 1 mousedownマウスダウン 2 mouseupマウスリリース 3 click左クリック 4 dblclick左ダブルクリック 5 mousemoveマウス動作 6 mouseoverマウスオーバー 7 mouseoutマウスアウト 8 mouseenterマウス入力 9 mouseleaveマウスアウト 10 contextmenu右クリックメニュー 実行シーケンスは
mousedown=>mouseup=>click
mouseoverで、mouseoutサブ要素もトリガーされます。これはバブリングによってトリガーされ
mouseenter、mouseleaveリスニング オブジェクトによってトリガーされるため、バブリングを防止できます。
マウスのデフォルトイベントをブロックする
event.preventDefault();
event.returnValue = false;//IE8および次の互換性のある書き込み
return false;//IE互換性のある書き込み。onデフォルトのイベントを防ぐためにイベントにのみ使用されます
右クリックメニューを削除する
document.body.addEventListener("contextmenu", clickHandler);
function clickHandler(event) {
// 阻止事件默认行为
event.preventDefault();
console.log(event.type);
}
デフォルトで画像がドラッグされないようにする
let img = document.querySelector("img");
img.addEventListener("mousedown", mouseHandler);
function mouseHandler(event) {
event.preventDefault();
}
テキストのドラッグと選択を禁止する
document.body.addEventListener("mousedown", mouseHandler);
function mouseHandler(event){
event.preventDefault();
}
フォームの送信とリセットを禁止する
let bn = document.querySelector("[type=submit]");
bn.addEventListener("click", clickHandler);
function clickHandler(event){
event.preventDefault();
}
またはフォームに書き込んでください
let form = document.querySelector("form");
form.addEventListener("submit", submitHandler);
function submitHandler(event){
event.preventDefault();
// IE8 及以下兼容写法
// event.returnValue = false;
}
MouseEvent オブジェクトの内容を出力します。
document.body.addEventListener("mousedown", clickHandler); function clickHandler(event){ console.log(event); }
altKey、ctrlKey、shiftKey、metaKeyボタンがクリックされたかどうか
button、buttons、whichマウスのどのキーが操作されたかを判定する、
左ボタンに対応する値0、1、1
中ボタンに対応する値1、 、右ボタンに対応する4値、、時間ページのオープンからトリガーイベントまで2223
timeStamp
clientX と clientY (x と y)
clientXおよびとclientY同様、xどちらもyクライアント領域の座標であり、ブラウザの表示領域の左上隅から始まるマウスの座標を参照し、x新しいyブラウザでサポートされます。
オフセットXY
offsetX、offsetYターゲット要素 (event.target) の左上座標。
レイヤーXY
layerX、layerY位置決め属性を持つ親要素の左上隅を調べます (位置決め属性がある場合はそれ自体を基準にします)。何もない場合は左上隅を基準にしますbody。
要素にもその親にも位置決め属性がない場合は、 のbody左上隅が原点として使用されます。
要素の親に位置決め属性がある場合、親の左上隅が原点となります。
要素自体に位置決め属性がある場合は、要素の左上隅を原点として使用します
ページXY
pageX、pageYページの左上隅からの距離。
スクリーンXY
screenX、screenY画面の左上隅を基準にして。
要約する
clientXおよびとclientY同じで、ブラウザ表示領域の左上隅から開始し、マウスの座標を参照します。これは、新しいブラウザーのサポートの製品です。対象要素の左上の座標は最初から。そして、上に移動して、位置決め属性を持つ親要素の左上隅を見つけます (位置決め属性がある場合は、それ自体に対して相対的です)。何もない場合は、左上隅を基準にします。および相対ページの左上隅からの距離。画面の左上隅を基準にします。xyxy
offsetXoffsetYpadding
layerXlayerYbody
pageXpageY
screenXscreenY