jquery中屬於滑鼠的事件方法有哪些

jquery中屬於滑鼠的事件方法有：1、Click()，可以觸發滑鼠左鍵單擊事件；2、contextmenu()，可以觸發滑鼠右鍵單擊事件；3、dblclick()，可觸發滑鼠雙擊事件；4、mousedown()，可觸發滑鼠按下事件；5、mouseup()，可觸發滑鼠鬆開事件；6、mousemove()，可觸發滑鼠移動事件；7、mouseenter()，可觸發滑鼠移入事件等等。

前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

本教學操作環境：windows7系統、jquery3.6.1版本、Dell G3電腦。

JQuery滑鼠事件整理

1.單擊 ：左鍵單擊、右鍵單擊

.Click()：滑鼠左鍵單擊

為 JavaScript 的"click" 事件繫結一個處理器，或者觸發元素上的 "click" 事件。(支援觸控螢幕的tab事件)

.contextmenu():滑鼠右鍵單擊

右鍵選單按鈕時間，可以拒絕右鍵選單。

2.雙擊

.dblclick():雙擊觸發

3.滑鼠按下、滑鼠鬆開

.mousedown():滑鼠按下

.mouseup()：滑鼠鬆開

4.滑鼠移動

.mousemove()：滑鼠移動

5.滑鼠進入、滑鼠移出

.mouseenter():當滑鼠移入某元素時觸發。

.mouselevave():當滑鼠移出某元素時觸發。

.mouseout():當滑鼠移出某元素時觸發，移入和移出其子元素時也會觸發。

.mouseover():當滑鼠移入某元素時觸發，移入和移出其子元素時也會觸發。

6.滑鼠滾輪捲動

自帶Jquery庫不支援，有擴充套件庫支援滾輪事件。

7.其他jquery擴充套件事件

.hover():將mouseenter/mouselave二個事件函數繫結到匹配元素上，分別當滑鼠指標進入和離開元素時被執行。將一個單獨事件函數繫結到匹配元素上，分別當滑鼠指標進入和離開元素時被執行。

.toggle() :繫結兩個或多個處理程式繫結到匹配的元素，用來執行在交替的點選。

滑鼠event引數

event常用引數

• event.type：獲取事件的型別，觸發元素的事件型別

• event.pageX 和 event.pageY：獲取滑鼠當前相對於頁面的座標，可以確定元素在當前頁面的座標值，是以頁面為參考點,不隨滑動條移動而變化

• event.target：獲取觸發事件的元素

　　this和event.target的區別：

　　　　js中事件是會冒泡的，所以this是可以變化的，但event.target不會變化，它永遠是直接接受事件的目標DOM元素；

　　　　this和event.target都是dom物件，可以轉換為jquery物件：$(this)和$(event.target)

• event.which：獲取在滑鼠單擊事件中滑鼠的左、中、右鍵（左鍵1，中間鍵2，右鍵3），在鍵盤事件中鍵盤的鍵碼值
• event.currentTarget : 獲取冒泡前的當前觸發事件的DOM物件, 等同於this
• event.preventDefault() ：阻止預設行為，可以用 event.isDefaultPrevented() 來確定preventDefault是否被呼叫過了
• 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('滑鼠升起'); // 注：使用者在點選完左鍵之後，鬆開左鍵會觸發此事件
});

【推薦學習：】

以上就是jquery中屬於滑鼠的事件方法有哪些的詳細內容，更多請關注TW511.COM其它相關文章！