JavaScript 鼠標事件(MouseEvent)案例講解
鼠標事件-MouseEvent
當鼠標進行某種操作時，就會生成一個event對象，該對象記錄著鼠標觸發(fā)事件時的所有屬性。
可以通過如下方法在google控制臺打印出 MouseEvent 對象。
function mouseDown(e){
var e = e||event;
console.log(e)
}
window.onload = function (){
document.getElementsByTagName('body')[0].addEventListener('mousedown',mouseDown,false)
}
打印出來的 MouseEvent 如下：
該對象屬性很多，但最常用的 不過 offsetX、offsetY、clientX/clientY、pageX、pageY。各個屬性對應的是什么呢？
下面列出一下常用的事件
altkey ： 觸發(fā)鼠標事件時是否alt 按鍵被按下,如果按下，則返回true，否則返回 fasle。
button: 事件屬性返回一個阿拉伯數(shù)字 ， 0代表 按下 左鍵 ，1 代表按下 滾輪 ，2 代表按下 右鍵。
offsetX、offsetY ：事件屬性返回觸發(fā)事件時 鼠標相對于事件源元素 的X,Y坐標，標準事件沒有對應的屬性。
clientX、clientY ： 事件屬性返回當事件被觸發(fā)時鼠標指針相對于瀏覽器頁面（或客戶區(qū)）的水平坐標、垂直坐標。
pageX、pageY：事件屬性返回當事件被觸發(fā)時鼠標指針相對于整個頁面左上角的水平坐標、垂直坐標。
screenX、screenY：事件屬性返回當事件被觸發(fā)時鼠標位置相對于用戶屏幕水水平坐標、垂直坐標，此時的參照點也就是原點是屏幕的左上角。
好吧，文字敘述總歸是很煩，上個經(jīng)典的圖，解釋一切 ：
到此這篇關(guān)于JavaScript 鼠標事件(MouseEvent)案例講解的文章就介紹到這了,更多相關(guān)JavaScript 鼠標事件(MouseEvent)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
window.opener 返回的是創(chuàng)建當前窗口的那個窗口的引用2010-04-04
Three.js是一個偉大的開源WebGL庫，WebGL允許JavaScript操作GPU，在瀏覽器端實現(xiàn)真正意義的3D本文將介紹模擬光照/Attribut變量/更新著色器材質(zhì)/更新著色器材質(zhì)等等感興趣的朋友可以了解下啊2013-01-01
這篇文章主要介紹了深入學習JavaScript 高階函數(shù)，在 JavaScript 中，函數(shù)是一種特殊類型的對象，它們是 Function objects。,需要的朋友可以參考下2019-06-06
鑒于有同學在學習的時候容易混肴，所以筆者還是將其加以區(qū)別,需要的朋友可以參考下2013-07-07
ECMAScript6的新特性箭頭函數(shù)（Arrow Function）詳細介紹
這篇文章主要介紹了ECMAScript6的新特性箭頭函數(shù)（Arrow Function）詳細介紹,ECMAScript6其實就是JavaScript,它的新特性就是JS的新特性,引入只是時間問題,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了淺談開發(fā)eslint規(guī)則，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
緩動動畫原理：移動的像素慢慢減少，讓效果看起來更柔和更美觀，通過定時器加回調(diào)函數(shù)，實現(xiàn)動畫效果以及更多具體功能，非常好用2021-11-11
很多語言把數(shù)組作為集合的基礎(chǔ)，所以array是學習每一項語言必須掌握的。2010-01-01
javascript小數(shù)四舍五入多種方法實現(xiàn)
javascript小數(shù)四舍五入在工作中經(jīng)常會使用到，今天本文整理了一些常用的小竅門，需要了解的朋友可以參考下2012-12-12
JavaScript獲取tr td 的三種方式全面總結(jié)（推薦）
這篇文章主要介紹了JavaScript獲取tr td 的三種方式,具體操作步驟大家可查看下文詳細講解,感興趣的小伙伴們可以參考一下。2017-08-08