鼠標事件-MouseEvent

當鼠標進行某種操作時，就會生成一個event對象，該對象記錄著鼠標觸發事件時的所有屬性。

可以通過如下方法在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 ： 觸發鼠標事件時是否alt 按鍵被按下,如果按下，則返回true，否則返回 fasle。

button: 事件屬性返回一個阿拉伯數字 ， 0代表 按下 左鍵 ，1 代表按下 滾輪 ，2 代表按下 右鍵。

offsetX、offsetY ：事件屬性返回觸發事件時 鼠標相對于事件源元素 的X,Y坐標，標準事件沒有對應的屬性。

clientX、clientY ：事件屬性返回當事件被觸發時鼠標指針相對于瀏覽器頁面（或客戶區）的水平坐標、垂直坐標。

pageX、pageY：事件屬性返回當事件被觸發時鼠標指針相對于整個頁面左上角的水平坐標、垂直坐標。

screenX、screenY：事件屬性返回當事件被觸發時鼠標位置相對于用戶屏幕水水平坐標、垂直坐標，此時的參照點也就是原點是屏幕的左上角。

好吧，文字敘述總歸是很煩，上個經典的圖，解釋一切 ：

（完）

轉載于:https://www.cnblogs.com/hanguozhi/p/7382719.html