鼠標(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)文章希望大家以后多多支持腳本之家！

最新評論