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