jqueryのマウスイベントメソッドとは何ですか?

jquery のマウス イベント メソッドは次のとおりです: 1. Click() (マウスの左クリック イベントをトリガーできます); 2. contextmenu() (マウスの右クリック イベントをトリガーできます); 3. dblclick()マウスのダブルクリック イベントをトリガーできます。4.mousedown()、マウス プレス イベントをトリガーできます。5.mouseup()、マウス リリース イベントをトリガーできます。6.mousemove()、マウス移動イベントをトリガーできます。7. Mouseenter()、マウス移動イベントなどをトリガーできます。

このチュートリアルの動作環境: Windows7 システム、jquery3.6.1 バージョン、Dell G3 コンピューター。

JQuery マウス イベントの構成

1. クリック: 左クリック、右クリック

。 Click(): マウスの左ボタンをクリックします。

ハンドラーを JavaScript の「クリック」イベントにバインドするか、要素上で「クリック」イベントをトリガーします。 (タッチ スクリーンのタブ イベントをサポート)

.contextmenu():

右クリック メニュー ボタンをマウスで右クリックしたときに、右クリック メニューを拒否できます。

2. ダブルクリック

.dblclick(): ダブルクリック トリガー

3. マウスが押され、マウスが放された

.mousedown(): マウスが押された

.mouseup(): マウスが放された

4. マウスの動き

。 Mousemove(): マウスの移動

#5. マウス入力、マウス移動アウト

#.mouseenter(): マウスが要素内に移動するとトリガーされます。

.mouselevave(): マウスが要素の外に出るとトリガーされます。

.mouseout(): マウスが要素から出るときにトリガーされ、マウスがその子要素に出入りするときにもトリガーされます。

.mouseover(): マウスが要素内に移動したとき、およびマウスが子要素の内外に移動したときにもトリガーされます。

6. マウス ホイール スクロール

組み込みの Jquery ライブラリはこれをサポートしていません。ホイール イベントをサポートする拡張ライブラリがあります。

7. その他の jquery 拡張イベント

.hover(): マウス ポインターが入ったときと、マウス ポインターが入ったときに実行されるそれぞれ、mouseenter/mouselave イベント関数を一致する要素にバインドします。要素を離れる。単一のイベント関数を一致する要素にバインドし、マウス ポインターが要素に出入りしたときに実行されるようにします。

.toggle() : 2 つ以上のハンドラーを一致する要素にバインドして、交互のクリックで実行します。

マウスイベントパラメータ

イベント共通パラメータ

• event.type: のタイプを取得します。 event 、要素

• event.pageX および event.pageY をトリガーするイベント タイプ: に対する相対的なマウスの現在の座標を取得します。現在のページの 座標値 は、ページを基準点としており、スライダーの移動によって変化しません

• event.target: トリガー イベント要素を取得します。

this と event.target の違い:

js 内のイベントはバブルするため、これは変更できますが、event.target は変更されません。イベントを直接受け入れるターゲット DOM 要素は常に、

# これとevent.target です。どちらも DOM オブジェクトであり、jquery オブジェクトに変換できます: $(this) と $(event.target)

• event.that: 左、中央、右を取得します。マウス クリック イベントのマウスのボタン (左ボタン 1、中ボタン 2、右ボタン 3)、キーボード イベントのキーボードのキー コード値
• event.currentTarget:バブリングの前に現在トリガーされたイベントの DOM オブジェクトを取得します。これは次と同等です
• event.preventDefault(): デフォルトの動作を防止します。event.isDefaultPrevented() を使用して決定できます。
• event.stopPropagation(): イベントの発生を防止します。バブル、イベントはバブルする可能性があります。イベントが DOM ツリーにバブルアップしてイベント処理関数がトリガーされないようにするには、先行要素では、event.isPropagationStopped() を使用して stopPropagation が呼び出されたかどうかを判断できます。

JQuery マウス イベントの例

clickイベント: マウスクリックイベント

<script>
    $('p').click(function(){
        alret('被点击一次')
    })
</script>

mousedownイベント: マウスダウンイベント

<script>
    $('p').mousedown(function(){
        alret('鼠标按下一次')
    })
</script>

mouseenterイベント:マウス入力イベント

<script>
    $('p').mousedown(function(){
        alret('鼠标进入一次')
    })
</script>

mouseleaveイベント: マウス離脱イベント

<script>
    $('p').mousedown(function(){
        alret('鼠标离开一次')
    })
</script>

mousemoveイベント: マウス移動イベント

<script>
    $('p').mousedown(function(){
        alret('鼠标移动了') // 注意这个事件是根据鼠标的位置发生变化，意思就是，你移动一次鼠标他就出触发一次
    })
</script>

mouseoutイベント: マウス移動イベント

$("p").mouseout(function(){
  $("p").css("background-color","#E9E9E4"); // 注：鼠标移开用户指定的某个元素的时候会触发这个事件
});

mouseupイベント: マウスを押した後に左ボタンを放したときのイベント

$("p").mouseout(function(){
  alret('鼠标升起'); // 注：用户在点击完左键之后，松开左键会触发此事件
});

[推奨学習:

JavaScript ビデオ チュートリアル ##]

以上がjqueryのマウスイベントメソッドとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。