(93)Wangdao.com_第二十六天_鼠標事件

時間 2019-11-08

標籤 wangdao.com wangdao com 第二十六天 16天鼠標事件简体版

原文原文鏈接

鼠標事件瀏覽器

與鼠標相關的事件，繼承了 MouseEvent 接口函數

分類：

click 按下鼠標（一般是按下主按鈕）時觸發。 mousedown 首先觸發，mouseup 接着觸發，click 最後觸發
dblclick 在同一個元素上雙擊鼠標時觸發。在mousedown、mouseup、click 以後觸發 dbclick性能

mousedown 按下鼠標鍵時觸發。
mouseup 釋放按下的鼠標鍵時觸發。spa

mousemove 當鼠標在一個節點內部移動時觸發。當鼠標持續移動時，該事件會連續觸發。爲了不性能問題，建議對該事件的監聽函數作一些限定，好比限定一段時間內只能運行一次。code

mouseenter 鼠標進入一個節點時觸發，進入子節點不會觸發這個事件（詳見後文）。
mouseleave 鼠標離開一個節點時觸發，離開父節點不會觸發這個事件（詳見後文）。對象

mouseover      鼠標進入一個節點時觸發，進入子節點會再一次觸發這個事件（詳見後文）。
mouseout       鼠標離開一個節點時觸發，離開父節點也會觸發這個事件（詳見後文）。
contextmenu   按下鼠標右鍵時（上下文菜單出現前）觸發，或者按下「上下文菜單鍵」時觸發。
wheel   滾動鼠標的滾輪時觸發，該事件繼承的是 WheelEvent 接口。blog

鼠標相關的動做，所產生的事件對象都是 MouseEvent 實例。
此外，滾輪事件和拖拉事件也是 MouseEvent 實例 MouseEvent 接口繼承了 Event 接口，因此擁有 Event 的全部屬性和方法。它還有本身的屬性和方法
var event = new MouseEvent(eventType, options);

options 除了Event 接口的實例配置屬性，該對象能夠配置如下屬性，全部屬性都是可選的繼承

screenX 數值鼠標相對於屏幕的水平位置（單位像素），默認值爲 0，設置該屬性不會移動鼠標。
screenY 數值鼠標相對於屏幕的垂直位置（單位像素），其餘與 screenX 相同。接口

clientX 數值鼠標相對於程序窗口的水平位置（單位像素），默認值爲0，設置該屬性不會移動鼠標。
clientY 數值鼠標相對於程序窗口的垂直位置（單位像素），其餘與 clientX 相同。seo

ctrlKey 布爾值是否同時按下了 Ctrl 鍵，默認值爲 false。

shiftKey 布爾值是否同時按下了 Shift 鍵，默認值爲 false。

altKey 布爾值是否同時按下 Alt 鍵，默認值爲 false。

metaKey 布爾值是否同時按下 Meta 鍵，默認值爲 false。

button 數值表示按下了哪個鼠標按鍵，默認值爲0，表示按下主鍵（一般是鼠標的左鍵）或者當前事件沒有定義這個屬性；

1表示按下輔助鍵（一般是鼠標的中間鍵），2表示按下次要鍵（一般是鼠標的右鍵）。

buttons 數值表示按下了鼠標的哪些鍵，是一個三個比特位的二進制值，默認爲0（沒有按下任何鍵）。

1（二進制001）表示按下主鍵（一般是左鍵），

2（二進制010）表示按下次要鍵（一般是右鍵），

4（二進制100）表示按下輔助鍵（一般是中間鍵）。

所以，若是返回3（二進制011）就表示同時按下了左鍵和右鍵。

relatedTarget 節點對象表示事件的相關節點，默認爲 null。

mouseenter 和 mouseover 事件時，表示鼠標剛剛離開的那個元素節點；

mouseout 和 mouseleave 事件時，表示鼠標正在進入的那個元素節點。

MouseEvent 接口的實例屬性

// HTML 代碼以下
// <body onclick="showKey(event)">

function showKey(e) {
    console.log('ALT key pressed: ' + e.altKey);
    console.log('CTRL key pressed: ' + e.ctrlKey);
    console.log('META key pressed: ' + e.metaKey);
    console.log('SHIFT key pressed: ' + e.shiftKey);
};

event.button 返回一個數值，表示事件發生時按下了鼠標的哪一個鍵

0 按下主鍵（一般是左鍵），或者該事件沒有初始化這個屬性（好比mousemove事件）。

1 按下輔助鍵（一般是中鍵或者滾輪鍵）。

2 按下次鍵（一般是右鍵）

// HTML 代碼爲
// <button onmouseup="whichButton(event)">點擊</button>

var whichButton = function (e) {
    switch (e.button) {
        case 0:
            console.log('Left button clicked.');
            break;
        case 1:
            console.log('Middle button clicked.');
            break;
        case 2:
            console.log('Right button clicked.');
            break;
        default:
            console.log('Unexpected code: ' + e.button);
    };
};

event.buttons 返回一個三個比特位的值，表示同時按下了哪些鍵。

它用來處理同時按下多個鼠標鍵的狀況。

1 二進制爲001（十進制的1），表示按下左鍵。

2 二進制爲010（十進制的2），表示按下右鍵。

4 二進制爲100（十進制的4），表示按下中鍵或滾輪鍵。

event.clientX 返回鼠標位置相對於瀏覽器窗口左上角的水平座標（單位像素）只讀屬性

event.clientY 返回鼠標位置相對於瀏覽器窗口左上角的垂直座標只讀屬性

event.screenX 返回鼠標位置相對於屏幕左上角的水平座標（單位像素）只讀屬性

event.screenY 返回鼠標位置相對於屏幕左上角的垂直座標只讀屬性

event.movementX 返回當前位置與上一個 mousemove 事件之間的水平距離（單位像素）

event.movementY 返回當前位置與上一個 mousemove 事件之間的垂直距離（單位像素）

數值上，它等於下面的計算公式

event.movementX = event.screenX - oldEvent.screenX

event.offsetX 返回鼠標位置與目標節點 border-left 的水平距離（單位像素）只讀屬性。

event.offsetY 返回鼠標位置與目標節點上方的 border-top 的垂直距離只讀屬性。

/* HTML 代碼以下
    <style>
    p {
        width: 100px;
        height: 100px;
        padding: 100px;
    }
    </style>
    
<p>Hello</p>
*/
var p = document.querySelector('p');
p.addEventListener('click', function (e) {
    console.log(e.offsetX);    // 150
    console.log(e.offsetY);    // 150
}, false);

event.pageX 返回鼠標位置與 網頁左側邊緣 的距離（單位像素）包括網頁 scroll 的部分只讀屬性

event.pageY 返回鼠標位置與 網頁上側邊緣 的距離（單位像素）包括網頁 scroll 的部分只讀屬性

/* HTML 代碼以下
<style>
    body {
        height: 2000px;
    }
</style>
*/
document.body.addEventListener('click', function (e) {
    console.log(e.pageX);
    console.log(e.pageY);
}, false);

event.relatedTarget 返回事件的相關節點。對於那些沒有相關節點的事件，該屬性返回null。該屬性只讀

事件名稱 target relatedTarget
focusin 接受焦點的節點喪失焦點的節點
focusout 喪失焦點的節點接受焦點的節點
mouseenter 將要進入的節點將要離開的節點
mouseleave 將要離開的節點將要進入的節點
mouseout 將要離開的節點將要進入的節點
mouseover 將要進入的節點將要離開的節點
dragenter 將要進入的節點將要離開的節點
dragexit 將要離開的節點將要進入的節點

/****
        <div id="outer" style=" height:500px;
                                width:500px;
                                border:1px solid black;">
            <div id="inner" style=" height:250px;
                                    width:250px;
                                    border:1px solid black;"></div>
        </div>
****/

window.addEventListener("DOMContentLoaded", function(){
    /**** event.relatedTarget ****/
    var inner = document.getElementById('inner');
    var outer = document.getElementById('outer');
    
    outer.addEventListener('mouseover', function (event) {
        console.log('over進入' + event.target.id + ' 離開' + event.relatedTarget.id);
    }, false);
    
    outer.addEventListener('mouseout', function () {
        console.log('over離開' + event.target.id + ' 進入' + event.relatedTarget.id);
    });
    
    outer.addEventListener('mouseenter', function (event) {
        console.log('enter進入' + event.target.id + ' 離開' + event.relatedTarget.id);
    });
    
    outer.addEventListener("mouseleave", function (){
        console.log('leave離開' + event.target.id + ' 進入' + event.relatedTarget.id);
    });

    // 鼠標從 outer 進入inner，輸出
    // 進入inner 離開outer
    // enter進入inner 離開outer

    // 鼠標從 inner進入 outer，輸出
    // 離開inner 進入outer
    // leave離開inner 進入outer
}, false);

MouseEvent 接口的實例方法

event.getModifierState()

返回一個布爾值，表示有沒有按下特定的功能鍵。它的參數是一個表示功能鍵的字符串

// 是否按下了 大寫 鍵
document.addEventListener('click', function (e) {
    console.log(e.getModifierState('CapsLock'));
}, false);

WheelEvent 接口

繼承了 MouseEvent 實例，表明鼠標滾輪事件的實例對象

var wheelEvent = new WheelEvent(type, options);

第一個參數是字符串，表示事件類型，對於滾輪事件來講，這個值目前只能是 "wheel"

第二個參數是事件的配置對象。

該對象的屬性除了 Event、UIEvent 的配置屬性之外，還能夠接受如下幾個屬性，全部屬性都是可選的
deltaX 表示滾輪的水平滾動量，默認值是 0.0。
deltaY 表示滾輪的垂直滾動量，默認值是 0.0。
deltaZ 表示滾輪的 Z 軸滾動量，默認值是 0.0。
deltaMode 表示相關的滾動事件的單位，適用於上面三個屬性。

0 表示滾動單位爲像素，1 表示單位爲行，2 表示單位爲頁，默認爲 0

event.deltaX 表示滾輪的水平滾動量

event.deltaY 表示滾輪的垂直滾動量

event.deltaZ 表示滾輪的 Z 軸滾動量

event.deltaMode 表示上面三個屬性的單位，0是像素，1是行，2是頁