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 的"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('鼠标升起'); // 注：用户在点击完左键之后，松开左键会触发此事件
});

【推薦學習：javascript影片教學】

#

以上是jquery中屬於滑鼠的事件方法有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！