前面的話

　　鼠標事件是DOM事件中最常用的事件，jQuery對鼠標事件進行了封裝和擴展。本文將詳細介紹jQuery鼠標事件

?

類型

　　鼠標事件共10類，包括click、contextmenu、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter和mouseleave

click 當用戶按下并釋放鼠標按鍵或其他方式“激活”元素時觸發 contextmenu 可以取消的事件，當上下文菜單即將出現時觸發。當前瀏覽器在鼠標右擊時顯示上下文菜單 dblclick 當用戶雙擊鼠標時觸發 mousedown 當用戶按下鼠標按鍵時觸發 mouseup 當用戶釋放鼠標按鍵時觸發 mousemove 當用戶移動鼠標時觸發 mouseover 當鼠標進入元素時觸發 mouseout 當鼠標離開元素時觸發 mouseenter 類似mouseover，但不冒泡 mouseleave 類似mouseout，但不冒泡

?

寫法

　　以上10類鼠標事件，都有對應的寫法。下面以click()事件為例，來說明鼠標事件的寫法

【1】click(handler(eventObject))

　　click()事件是bind()事件的簡寫形式，可以接受一個事件處理函數作為參數

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <div id="box" style="height:30px;width:200px;border:1px solid black"></div> <script> $('#box').click(function(){$(this).css('background','lightblue') }) </script>

【2】click([eventData],handler(eventObject))

　　click()事件可以接受兩個參數，第一個參數傳遞數據，第二個參數是處理函數

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <div id="box" style="height:30px;width:200px;border:1px solid black"></div> <script> $('#box').click(123,function(event){alert(event.data); }) </script>

【3】click()

　　click()事件不帶參數時，變成click()方法，是trigger('click')的簡寫形式

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <button id="btn1">按鈕一</button> <button id="btn2">按鈕二</button> <script> $('#btn1').on('click',function(){alert(1); }); $('#btn2').on('click',function(){$('#btn1').click(); }); </script>

合成事件

　　jQuery事件對鼠標事件進行了擴展，自定義了兩個合成事件——hover()和toggle()

　　[注意]toggle()事件已經在jQuery1.8版本刪除

hover()

　　hover(enter,leave)事件用于模擬光標懸停事件。鼠標移入時，觸發第一個函數參數；鼠標移出時，觸發第二個函數參數

　　hover()事件實際上是mouseenter事件和mouseleave事件的集合

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <div id="box" style="height:30px;width:200px;border:1px solid black"></div> <script> $('#box').on('mouseenter',function(event){$(this).css('background-color','lightblue'); }) $('#box').on('mouseleave',function(event){$(this).css('background-color','transparent'); }) </script>

　　用hover()事件實現如下

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <div id="box" style="height:30px;width:200px;border:1px solid black"></div> <script> $('#box').hover(function(){$(this).css('background-color','lightblue'); },function(){$(this).css('background-color','transparent'); }) </script>

　　當hover()事件只有一個參數時，該參數為mouseenter和mouseleave事件共同的函數

<style> .active{background-color:lightblue;} </style> <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <div id="box" style="height:30px;width:200px;border:1px solid black"></div> <script> $('#box').hover(function(){$(this).toggleClass('active') }) </script>

toggle()[已刪除]

　　toggle()事件用于模擬鼠標連續單擊事件。第1次單擊，觸發第1個函數參數；第2次單擊，觸發第2個函數函數；如果有更多函數，則依次觸發，直到最后一個。隨后的每次單擊都重復對這幾個函數輪番調用

?

鼠標按鍵

　　事件對象event的which屬性用于區分哪個鍵被按下，敲擊鼠標左鍵which的值是1，敲擊鼠標中鍵which的值是2，敲擊鼠標右鍵which的值是3

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <div id="box" style="height:30px;width:200px;border:1px solid black"></div> <script> $('#box').mousedown(function(event){alert(event.which) }) </script>

修改鍵

　　在按下鼠標時鍵盤上的某些鍵的狀態可以影響到所要采取的操作，這些修改鍵就是Shift、Ctrl、Alt和Meta(在Windows鍵盤中是Windows鍵，在蘋果機中是Cmd鍵)，它們經常被用來修改鼠標事件的行為

　　jQuery參照DOM規定了4個屬性，表示這些修改鍵的狀態：shiftKey、ctrlKey、altKey和metaKey。這些屬性中包含的都是布爾值，如果相應的鍵被按下了，則值為true；否則值為false

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <div id="box" style="height:30px;width:200px;border:1px solid black"></div> <script> $('#box').click(function(event){$('#box').html();if(event.shiftKey){$('#box').html('shiftKey;') }if(event.ctrlKey){$('#box').html('ctrlKey;') }if(event.altKey){$('#box').html('altKey;') }if(event.metaKey){$('#box').html('metaKey;') } }) </script>

坐標位置

　　關于坐標位置，DOM事件對象提供了clientX/Y、pageX/Y、screenX/Y、x/y、offsetX/Y、layerX/Y這6對信息，但各瀏覽器實現情況差異很大

　　jQuery關于坐標位置，提供了clientX/Y、offsetX/Y、screenX/Y、pageX/Y這四對信息

clientX/Y

　　clientX/Y表示鼠標指針在可視區域中的水平和垂直坐標

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <div id="box" style="height:30px;width:200px;border:1px solid black"></div> <script> $('#box').mousemove(function(event){$('#box').html(function(index,oldHtml){return 'clientX:' + event.clientX +';clientY:'+event.clientY}); }) </script>

offsetX/Y

　　offsetX/Y表示相對于定位父級的水平和垂直坐標

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <div id="box" style="height:30px;width:400px;border:1px solid black"></div> <script> $('#box').mousemove(function(event){$('#box').html(function(index,oldHtml){return 'clientX:' + event.clientX +';clientY:'+event.clientY + 'offsetX:' + event.offsetX +';offsetY:'+event.offsetY}); }) </script>

screenX/Y

　　screenX/Y表示鼠標指針相對于屏幕的水平和垂直坐標

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <div id="box" style="height:30px;width:400px;border:1px solid black"></div> <script> $('#box').mousemove(function(event){$('#box').html(function(index,oldHtml){return 'clientX:' + event.clientX +';clientY:'+event.clientY + 'screenX:' + event.screenX +';screenY:'+event.screenY}); }) </script>

pageX/Y

　　pageX/Y表示相對于頁面的水平和垂直坐標，它與clientX/clientY的區別是不隨滾動條的位置變化

<body style="height:2000px;"> <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <div id="box" style="height:100px;width:300px;background:pink;"></div> <div id="result"></div> <script> $('#box').mousemove(function(event){$('#result').html(function(index,oldHtml){return 'clientX:' + event.clientX +';clientY:'+event.clientY + 'pageX:' + event.pageX +';pageY:'+event.pageY}); }) </script> </body>

?

轉載于:https://www.cnblogs.com/fengxianzi/p/7125546.html

總結

以上是生活随笔為你收集整理的深入学习jQuery鼠标事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。