JavaScript でマウスアップ イベントが失われる理由と解決策

この記事では主に、JavaScriptでmouseupイベントが失われる原因と解決策についての関連情報を紹介します。必要な方は、参考にして勉強してください。そして勉強。

はじめに

Excelで選択領域と同様の機能を実装する場合、mouseupイベントが失われ、完全な操作が実行できないことがよくあります。

ドラッグして移動操作を実行したい場合は、この記事も参照してください。

原因

現在、2つの理由が見つかりました:

• がブラウザのドラッグ操作をトリガーし、マウスアップが失われました。

• マウスが操作領域から離れたため、mouseleave がトリガーされ、mouseup が失われました。
  

解決策

最初のケース

システムのデフォルトの動作を防ぐために次のコードを実行してドラッグがトリガーされないようにします:

//在事件中
e=e || window.event;
pauseEvent(e);

//阻止事件冒泡
//不仅仅要stopPropagation，还要preventDefault
function pauseEvent(e){
 if(e.stopPropagation) e.stopPropagation();
 if(e.preventDefault) e.preventDefault();
 e.cancelBubble=true;
 e.returnValue=false;
 return false;
}

イベント操作でpauseEventメソッドを使用するため、領域内でのマウスアップのロスを回避できます。実装したいのがドラッグ操作であっても、マウスの動きに追従する DOM 要素を作成することで効果を実現できます。

2番目のケース

マウスが領域の外に移動したため、mouseleave操作がトリガーされるため、この場合、mouseleave操作を監視する必要があり、操作がトリガーされた場合、それを停止または元の状態に戻すことができます状態。

注意事項

マウスイベントを処理するとき、どのキーが押されて操作が許可されるかを制御するかどうかも検討できます。

Mouse イベントにはボタン 属性 があります。この値は、マウスが 1 つ以上のボタンを押したことを示します:

0: ボタンがないか、初期化されていません。

1: マウスの左ボタン

2: マウスの右ボタン

4: マウスホイールまたは中央ボタン

8: 4 番目のボタン (通常は「ブラウザーの戻る」ボタン)

16: 5 番目のボタン(通常は「ブラウザ進む」)

複数の値がある場合は、| 操作を実行することと同じです。つまり、マウスの左ボタンと右ボタンを同時に押すと、1|2=3 となります。 value&1!=0 を使用して、左ボタンが押されたかどうかを判断できます。たとえば、左ボタンと右ボタンが同時に押された場合、3&1!=0 は true となり、左ボタンが押されたことを示します。

概要

以上がJavaScript でマウスアップ イベントが失われる理由と解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。