JavaScript 鼠標(biāo)事件(MouseEvent)案例講解
鼠標(biāo)事件-MouseEvent
當(dāng)鼠標(biāo)進(jìn)行某種操作時，就會生成一個event對象，該對象記錄著鼠標(biāo)觸發(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。各個屬性對應(yīng)的是什么呢？
下面列出一下常用的事件
altkey ： 觸發(fā)鼠標(biāo)事件時是否alt 按鍵被按下,如果按下，則返回true，否則返回 fasle。
button: 事件屬性返回一個阿拉伯?dāng)?shù)字 ， 0代表 按下 左鍵 ，1 代表按下 滾輪 ，2 代表按下 右鍵。
offsetX、offsetY ：事件屬性返回觸發(fā)事件時 鼠標(biāo)相對于事件源元素 的X,Y坐標(biāo)，標(biāo)準(zhǔn)事件沒有對應(yīng)的屬性。
clientX、clientY ： 事件屬性返回當(dāng)事件被觸發(fā)時鼠標(biāo)指針相對于瀏覽器頁面（或客戶區(qū)）的水平坐標(biāo)、垂直坐標(biāo)。
pageX、pageY：事件屬性返回當(dāng)事件被觸發(fā)時鼠標(biāo)指針相對于整個頁面左上角的水平坐標(biāo)、垂直坐標(biāo)。
screenX、screenY：事件屬性返回當(dāng)事件被觸發(fā)時鼠標(biāo)位置相對于用戶屏幕水水平坐標(biāo)、垂直坐標(biāo)，此時的參照點(diǎn)也就是原點(diǎn)是屏幕的左上角。
好吧，文字?jǐn)⑹隹倸w是很煩，上個經(jīng)典的圖，解釋一切 ：
到此這篇關(guān)于JavaScript 鼠標(biāo)事件(MouseEvent)案例講解的文章就介紹到這了,更多相關(guān)JavaScript 鼠標(biāo)事件(MouseEvent)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Javascript 入門基礎(chǔ)學(xué)習(xí)
習(xí).net已經(jīng)近2年了，最近學(xué)習(xí)Ajax時發(fā)現(xiàn)自己的很多技術(shù)功底很是欠缺，比如JavaScript。今后我會將我正在學(xué)習(xí)的也寫成筆記，有時間的話將以前的東西整理整理也傳上來。2010-03-03
MyBatis是一款一流的支持自定義SQL、存儲過程和高級映射的持久化框架。MyBatis幾乎消除了所有的JDBC代碼，也基本不需要手工去 設(shè)置參數(shù)和獲取檢索結(jié)果,對MyBatis感興趣的小伙伴們可以參考一下2015-09-09
在用戶體驗(yàn)過程中可能會出現(xiàn)這樣的情況：自定義打開新窗口的樣式,本文將介紹詳細(xì)的解決方法，需要了解的朋友可以參考下2012-12-12
有時變量多寫起來真的很麻煩，很多繁瑣的差不多的重復(fù)工作，es6為我們提供了多種更加便利的聲明變量的形式——變量的解構(gòu)賦值。下面這篇文章主要介紹了ES6中變量解構(gòu)賦值的相關(guān)資料，需要的朋友可以參考下。2017-02-02
利用javascript數(shù)組長度循環(huán)數(shù)組內(nèi)所有元素
javascript循環(huán)數(shù)組內(nèi)所有元素代碼學(xué)習(xí)，大家參考使用吧2013-12-12
JavaScript?Hoisting變量提升機(jī)制實(shí)例解析
這篇文章主要為大家介紹了JavaScript變量提升Hoisting機(jī)制實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-11-11
js對文字進(jìn)行編碼涉及3個函數(shù)：escape,encodeURI，encodeURIComponent，另外還有相對應(yīng)的解碼函數(shù)，本文對編碼及解決函數(shù)坐下介紹，感興趣的朋友可以參考下2013-09-09
推薦一些非常不錯的javascript學(xué)習(xí)資源站點(diǎn)
推薦一些非常不錯的javascript學(xué)習(xí)資源站點(diǎn)...2007-08-08
淺談JavaScript function函數(shù)種類
這篇文章主要介紹了JavaScript function函數(shù)種類，包括普通函數(shù)、匿名函數(shù)、閉包函數(shù)、十分的全面，并附上了示例，這里推薦給大家，希望對大家能有所幫助。2014-12-12
JavaScript 頁面坐標(biāo)相關(guān)知識整理
對于頁面的一些坐標(biāo)與位置分析，一般需要控制層的位置的朋友有幫助。需要的朋友可以參考下。2010-01-01