在JavaScript中，鼠標(biāo)事件是 Web 開發(fā)中最常用的事件類型。鼠標(biāo)點(diǎn)擊事件包括 4 個(gè)：click（單擊）、dblclick（雙擊）、mousedown（按下）和 mouseup（松開）。其中 click 事件類型比較常用，而 mousedown 和 mouseup 事件類型多用在鼠標(biāo)拖放、拉伸操作中。

一、鼠標(biāo)事件類型詳細(xì)說明

二、鼠標(biāo)點(diǎn)擊

鼠標(biāo)點(diǎn)擊事件包括 4 個(gè)：click（單擊）、dblclick（雙擊）、mousedown（按下）和 mouseup（松開）。其中 click 事件類型比較常用，而 mousedown 和 mouseup 事件類型多用在鼠標(biāo)拖放、拉伸操作中。當(dāng)這些事件處理函數(shù)的返回值為 false 時(shí)，會(huì)禁止綁定對象的默認(rèn)行為。

示例

在下面示例中，當(dāng)定義超鏈接指向自身時(shí)（多在設(shè)計(jì)過程中 href 屬性值暫時(shí)使用 “#”或“?”表示），可以取消超鏈接被單擊時(shí)的默認(rèn)行為，即刷新頁面。

<a name="tag" id="tag" href="#" rel="external nofollow" >a</a>
<script>
    var a = document.getElementsByTagName("a");  //獲取頁面中所有超鏈接元素
    for (var i = 0; i < a.length; i ++) {  //遍歷所有a元素
        if ((new RegExp(window.location.href)).test(a[i].href)) {
            //如果當(dāng)前超鏈接href屬性中包含本頁面的URL信息
            a[i].onclick = function () {  //則為超鏈接注冊鼠標(biāo)單擊事件
                return false;  //將禁止超鏈接的默認(rèn)行為
            }
        }
    }
</script>

當(dāng)單擊示例中的超鏈接時(shí)，頁面不會(huì)發(fā)生跳轉(zhuǎn)（即禁止頁面發(fā)生刷新效果）。

三、鼠標(biāo)移動(dòng)

mousemove 事件類型是一個(gè)實(shí)時(shí)響應(yīng)的事件，當(dāng)鼠標(biāo)指針的位置發(fā)生變化時(shí)（至少移動(dòng)一個(gè)像素），就會(huì)觸發(fā) mousemove 事件。該事件響應(yīng)的靈敏度主要參考鼠標(biāo)指針移動(dòng)速度的快慢以及瀏覽器跟蹤更新的速度。

示例

下面示例演示了如何綜合應(yīng)用各種鼠標(biāo)事件實(shí)現(xiàn)頁面元素拖放操作的設(shè)計(jì)過程。實(shí)現(xiàn)拖放操作設(shè)計(jì)需要解決以下幾個(gè)問題。

• 定義拖放元素為絕對定位以及設(shè)計(jì)事件的響應(yīng)過程，這個(gè)比較容易實(shí)現(xiàn)。
• 清楚幾個(gè)坐標(biāo)概念：按下鼠標(biāo)時(shí)的指針坐標(biāo)，移動(dòng)中當(dāng)前鼠標(biāo)指針坐標(biāo)，松開鼠標(biāo)時(shí)的指針坐標(biāo)，拖放元素的原始坐標(biāo)，拖動(dòng)中的元素坐標(biāo)。
• 算法設(shè)計(jì)：按下鼠標(biāo)時(shí)，獲取被拖放元素和鼠標(biāo)指針的位置，在移動(dòng)中實(shí)時(shí)計(jì)算鼠標(biāo)偏移的距離，并利用該偏移距離加上被拖放元素的原坐標(biāo)位置，獲得拖放元素的實(shí)時(shí)坐標(biāo)。

如下圖所示，其中變量 ox 和 oy 分別記錄按下鼠標(biāo)時(shí)被拖放元素的縱橫坐標(biāo)值，它們可以通過事件對象的 offsetLeft 和 offsetTop 屬性獲取。變量 mx 和 my 分別表示按下鼠標(biāo)時(shí)，鼠標(biāo)指針的坐標(biāo)位置。而 event.mx 和 event.my 是事件對象的自定義屬性，用它們來存儲(chǔ)當(dāng)鼠標(biāo)移動(dòng)時(shí)鼠標(biāo)指針的實(shí)時(shí)位置。

當(dāng)獲取了上面 3 對坐標(biāo)值之后，就可以動(dòng)態(tài)計(jì)算拖動(dòng)中元素的實(shí)時(shí)坐標(biāo)位置，即 x 軸值為 ox+event.mx-mx，y 軸為 oy+event.my-my。當(dāng)釋放鼠標(biāo)按鈕時(shí)，就可以釋放事件類型，并記下松開鼠標(biāo)指針時(shí)拖動(dòng)元素的坐標(biāo)值，以及鼠標(biāo)指針的位置，留待下一次拖放操作時(shí)調(diào)用。

整個(gè)拖放操作的示例代碼如下：

<div id="box" ></div>
<script>
    // 初始化拖放對象
    var box = document.getElementById("box");
    // 獲取頁面中被拖放元素的引用指針
    box.style.position = "absolute";  // 絕對定位
    box.style.width = "160px";  // 定義寬度
    box.style.height = "120px";  // 定義高度
    box.style.backgroundColor = "red";  // 定義背景色
    // 初始化變量，標(biāo)準(zhǔn)化事件對象
    var mx, my, ox, oy;  // 定義備用變量
    function e(event){  // 定義事件對象標(biāo)準(zhǔn)化函數(shù)
        if( ! event){  // 兼容IE瀏覽器
            event = window.event;
            event.target = event.srcElement;
            event.layerX = event.offsetX;
            event.layerY = event.offsetY;
        }
        event.mx = event.pageX || event.clientX + document.body.scrollLeft;
        // 計(jì)算鼠標(biāo)指針的x軸距離
        event.my = event.pageY || event.clientY + document.body.scrollTop;
        // 計(jì)算鼠標(biāo)指針的y軸距離
        return event;  // 返回標(biāo)準(zhǔn)化的事件對象
    }
     // 定義鼠標(biāo)事件處理函數(shù)
    document.onmousedown = function(event){  // 按下鼠標(biāo)時(shí)，初始化處理
        event = e(event);  // 獲取標(biāo)準(zhǔn)事件對象
        o = event.target;  // 獲取當(dāng)前拖放的元素
        ox = parseInt(o.offsetLeft);  // 拖放元素的x軸坐標(biāo)
        oy = parseInt(o.offsetTop);  // 拖放元素的y軸坐標(biāo)
        mx = event.mx;  // 按下鼠標(biāo)指針的x軸坐標(biāo)
        my = event.my;  // 按下鼠標(biāo)指針的y軸坐標(biāo)
        document.onmousemove = move;  // 注冊鼠標(biāo)移動(dòng)事件處理函數(shù)
        document.onmouseup = stop;  // 注冊松開鼠標(biāo)事件處理函數(shù)
    }
    function move(event){  // 鼠標(biāo)移動(dòng)處理函數(shù)
        event = e(event);
        o.style.left = ox + event.mx - mx  + "px";  // 定義拖動(dòng)元素的x軸距離
        o.style.top = oy + event.my - my + "px";  // 定義拖動(dòng)元素的y軸距離
    }
    function stop(event){  // 松開鼠標(biāo)處理函數(shù)
       event = e(event);
       ox = parseInt(o.offsetLeft);  // 記錄拖放元素的x軸坐標(biāo)
       oy = parseInt(o.offsetTop);  // 記錄拖放元素的y軸坐標(biāo)
       mx = event.mx ;  // 記錄鼠標(biāo)指針的x軸坐標(biāo)
       my = event.my ;  // 記錄鼠標(biāo)指針的y軸坐標(biāo)
       o = document.onmousemove = document.onmouseup = null;
       // 釋放所有操作對象
    }
</script>

四、鼠標(biāo)經(jīng)過

鼠標(biāo)經(jīng)過包括移過和移出兩種事件類型。當(dāng)移動(dòng)鼠標(biāo)指針到某個(gè)元素上時(shí)，將觸發(fā) mouseover 事件；而當(dāng)把鼠標(biāo)指針移出某個(gè)元素時(shí)，將觸發(fā) mouseout 事件。如果從父元素中移到子元素中時(shí)，也會(huì)觸發(fā)父元素的 mouseover 事件類型。

示例

在下面示例中，分別為 3 個(gè)嵌套的 div 元素定義了 mouseover 和 mouseout 事件處理函數(shù)，這樣當(dāng)從外層的父元素中移動(dòng)到內(nèi)部的子元素中時(shí)，將會(huì)觸發(fā)父元素的 mouseover 事件類型，但是不會(huì)觸發(fā) mouseout 事件類型。

<div>
    <div>
        <div>盒子</div>
    </div>
</div>
<script>
    var div = document.getElementsByTagName("div");
    // 獲取3個(gè)嵌套的div元素
    for(var i=0;i<div.length;i++){    // 遍歷嵌套的div元素
        div[i].onmouseover = function(e){   // 注冊移過事件處理函數(shù)
            this.style.border = "solid blue";
        }
        div[i].onmouseout = function(){   // 注冊移出事件處理函數(shù)
            this.style.border = "solid red";
        }
    }
</script>

五、鼠標(biāo)來源

當(dāng)一個(gè)事件發(fā)生后，可以使用事件對象的 target 屬性獲取發(fā)生事件的節(jié)點(diǎn)元素。如果在 IE 事件模型中實(shí)現(xiàn)相同的目標(biāo)，可以使用 srcElement 屬性。

示例1

在下面示例中，當(dāng)鼠標(biāo)移過頁面中的 div 元素時(shí)，會(huì)彈出提示對話框，提示當(dāng)前元素的節(jié)名稱。

<div>div元素</div>
<script>
    var div = document.getElementsByTagName("div")[0];
    div.onmouseover = function(e){ // 注冊mouseover事件處理函數(shù)
        var e = e || window.event;  // 標(biāo)準(zhǔn)化事件對象，兼容DOM和IE事件模型
        var o = e.target || e.srcElement;  // 標(biāo)準(zhǔn)化事件屬性，獲取當(dāng)前事件的節(jié)點(diǎn)
        alert(o.tagName);      // 返回字符串“DIV”
    }
</script>

在 DOM 事件模型中還定義了 currentTarget 屬性，當(dāng)事件在傳播過程中（如捕獲和冒泡階段）時(shí)，該屬性值與 target 屬性值不同。因此，一般在事件處理函數(shù)中，有你哥哥使用該屬性而不是 this 關(guān)鍵詞獲取當(dāng)前對象。

除了使用上面提到的通用事件屬性外，如果想獲取鼠標(biāo)指針來移動(dòng)某個(gè)元素，在 DOM 事件模型中可以使用 relatedTarget 屬性獲取當(dāng)前事件對象的相關(guān)節(jié)點(diǎn)元素；而在 IE 事件模型中，可以使用 fromElement 獲取 mouseover 事件中鼠標(biāo)移到過的元素，使用 toElement 屬性獲取在 mouseout 事件中鼠標(biāo)移到的文檔元素。

示例2

在下面示例中，當(dāng)鼠標(biāo)移到 div 元素上時(shí)，會(huì)彈出“BODY”字符提示信息，說明鼠標(biāo)指針是從 body 元素過來的；而移開鼠標(biāo)指針時(shí)，又彈出“BODY”字符提示信息，說明離開 div 元素將要移到的元素。

<div>div元素</div>
<script>
    var div = document.getElementsByTagName("div")[0];
    div.onmouseover = function(e){
        var e = e || window.event;
        var o = e.relatedTarget || e.fromElement;  //標(biāo)準(zhǔn)化事件屬性，獲取與當(dāng)前事件相關(guān)的節(jié)點(diǎn)
        alert(o.tagName);
    }
    div.onmouseout = function(e){
        var e = e || window.event;
        var o = e.relatedTarget || e.toElement;  // 標(biāo)準(zhǔn)化事件屬性，獲取與當(dāng)前事件相關(guān)的節(jié)點(diǎn)
        alert(o.tagName);
    }
</script> 

六、鼠標(biāo)定位

當(dāng)事件發(fā)生時(shí)，獲取鼠標(biāo)的位置是件很重要的事件。由于瀏覽器的不兼容性，不同瀏覽器分別在各自事件對象中定義了不同的屬性，說明如下表所示。這些屬性都是以像素值定義了鼠標(biāo)指針的坐標(biāo)，但是由于它們參照的坐標(biāo)系不同，導(dǎo)致精確計(jì)算鼠標(biāo)的位置比較麻煩。

屬性及其兼容性

示例1

下面介紹如何配合使用多種鼠標(biāo)坐標(biāo)屬性，以實(shí)現(xiàn)兼容不同瀏覽器的鼠標(biāo)定位設(shè)計(jì)方案。

首先，來看看 screenX 和 screenY 屬性。這兩個(gè)屬性獲得了所有瀏覽器的支持，應(yīng)該說是最優(yōu)選用屬性，但是它們的坐標(biāo)系時(shí)計(jì)算機(jī)屏幕，也就是說，以計(jì)算機(jī)屏幕左上角為定位原點(diǎn)。這對于以瀏覽器窗口為活動(dòng)空間的網(wǎng)頁來說沒有任何價(jià)值。因?yàn)椴煌钠聊环直媛剩煌臑g覽器窗口大小和位置，都使得在網(wǎng)頁中定位鼠標(biāo)成為一件很困難的事情。

其次，如果以 document 對象為坐標(biāo)系，則可以考慮選用 pageX 和 pageY 屬性實(shí)現(xiàn)在瀏覽器窗口中進(jìn)行定位。這對于設(shè)計(jì)鼠標(biāo)跟隨來說是一個(gè)好主意，因?yàn)楦S元素一般都以絕對定位的方式在瀏覽器窗口中移動(dòng)，在 mousemove 事件處理函數(shù)中把 pageX 和 pageY 屬性值傳遞給跟絕對定位元素的 top 和 left樣式屬性即可。

IE 事件模型不支持上面的屬性，為此還需尋求兼容 IE 的方法。而看 clientX 和 clientY 屬性是以 window 對象為坐標(biāo)系，且 IE 事件模型支持它們，可以選用它們。不過考慮 window 等對象可能出現(xiàn)的滾動(dòng)條偏移量，所以還應(yīng)加上相對于 window 對象的頁面滾動(dòng)的偏移量。

var posX = 0, posY = 0;
var event = event || window.event;
if (event.pageX || event.pageY) {
    posX = event.pageX;
    posY = event.pageY;
} else if (event.clientX || event.clientY) {
    posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
    posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
}

在上面代碼中，先檢測 pageX 和 pageY 屬性是否存在，如果存在則獲取它們的值；如果不存在，則檢測并獲取 clientX 和 clientY 屬性值，然后加上 document.documentElement 和 document.body 對象的 scrollLeft 和 scrollTop 屬性值，這樣在不同瀏覽器中就獲得了相同的坐標(biāo)值。

示例2

封裝鼠標(biāo)定位代碼。設(shè)計(jì)思路：能夠根據(jù)傳遞的具體對象，以及相對鼠標(biāo)指針的偏移量，命令該對象能夠跟隨水保移動(dòng)。

先定義一個(gè)封裝函數(shù)，設(shè)計(jì)函數(shù)傳入?yún)?shù)為對象引用指針、相對鼠標(biāo)指針的偏移距離，以及事件對象。然后封裝函數(shù)能夠根據(jù)事件對象獲取鼠標(biāo)的坐標(biāo)值，并設(shè)置該對象為絕對定位，絕對定位的值為鼠標(biāo)指針當(dāng)前的坐標(biāo)值。

封裝代碼如下：

var pos = function (o, x, y, event) {  //鼠標(biāo)定位賦值函數(shù)
    var posX = 0, posY = 0;  //臨時(shí)變量值
    var e = event || window.event;  //標(biāo)準(zhǔn)化事件對象
    if (e.pageX || e.pageY) {  //獲取鼠標(biāo)指針的當(dāng)前坐標(biāo)值
        posX = e.pageX;
        posY = e.pageY;
    } else if (e.clientX || e.clientY) {
        posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
        posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
    }
    o.style.position = "absolute";  //定義當(dāng)前對象為絕對定位
    o.style.top = (posY + y) + "px";  //用鼠標(biāo)指針的y軸坐標(biāo)和傳入偏移值設(shè)置對象y軸坐標(biāo)
    o.style.left = (posX + x) + "px";  //用鼠標(biāo)指針的x軸坐標(biāo)和傳入偏移值設(shè)置對象x軸坐標(biāo)
}

下面測試封裝代碼。為 document 對象注冊鼠標(biāo)移動(dòng)事件處理函數(shù)，并傳入鼠標(biāo)定位封裝函數(shù)，傳入的對象為 <div> 元素，設(shè)置其位置向鼠標(biāo)指針右下方偏移（10,20）的距離?？紤]到 DOM 事件模型通過參數(shù)形式傳遞事件對象，所以不要忘記在調(diào)用函數(shù)中還要傳遞事件對象。

<div id="div1">鼠標(biāo)追隨</div>
<script>
    var div1 = document.getElementById("div1");
    document.onmousemove = function (event) {
        pos (div1, 10, 20, event);
    }
</script>

示例3

獲取鼠標(biāo)指針在元素內(nèi)的坐標(biāo)。使用 offsetX 和 offsetY 屬性可以實(shí)現(xiàn)這樣的目標(biāo)，但是 Mozilla 瀏覽器不支持?？梢赃x用 layerX 和 layerY 屬性來兼容 Mozilla 瀏覽器。

設(shè)計(jì)代碼如下：

var event = event || window.event;
if (event.offsetX || event.offsetY) {  //適用非Mozilla瀏覽器
    x = event.offsetX;
    y = event.offsetY;
} else if (event.layerX || event.layerY) {  //兼容Mozilla瀏覽器
    x = event.layerX;
    y = event.layerY;
}

但是，layerX 和 layerY 屬性是以絕對定位的父元素為參照物，而不是元素自身。如果沒有絕對定位的父元素，則會(huì)以 document 對象為參照物。為此，可以通過腳本動(dòng)態(tài)添加或者手動(dòng)添加的方式，設(shè)計(jì)在元素的外層包圍一個(gè)絕對定位的父元素，這樣可以解決瀏覽器兼容問題?？紤]到元素之間的距離所造成的誤差，可以適當(dāng)減去 1 個(gè)或幾個(gè)像素的偏移量。

完整設(shè)計(jì)代碼如下：

<input type="text" id="text" />
<span style="position:absolute;">
    <div id="div1" style="width:200px;height:160px;border:solid 1px red;">鼠標(biāo)跟隨</div>
</span>
<script>
    var t = document.getElementById("text");
    var div1 = document.getElementById("div1");
    div1.onmousemove = function (event) {
        var event = event || window.event;  //標(biāo)準(zhǔn)化事件對象
        if (event.offsetX || event.offsetY) {
            t.value = event.offsetX + "" + event.offsetY;
        } else if (event.layerX || event.layerY) {
            t.value = (event.layerX-1) + "" + (event.layerY-1);
        }
    }
</script>

這種做法能夠解決在元素內(nèi)部定位鼠標(biāo)指針的問題。但是，由于在元素外面包裹了一個(gè)絕對定位的元素，會(huì)破壞整個(gè)頁面的結(jié)構(gòu)布局。在確保這種人為方式不會(huì)導(dǎo)致結(jié)構(gòu)布局混亂的前提下，可以考慮選用這種方法。

七、鼠標(biāo)按鍵

通過事件對象的 button 屬性可以獲取當(dāng)前鼠標(biāo)按下的鍵，該屬性可用于 click、mousedown、mouseup 事件類型。不過不同模型的約定不同，具體說明如下表所示。

鼠標(biāo)事件對象的 button 屬性

IE 事件模型支持位掩碼技術(shù)，它能夠偵測到同時(shí)按下的多個(gè)鍵。例如，同時(shí)按下左右鍵，則 button 屬性值為 1+2=3；同時(shí)按下中鍵和右鍵，則 button 屬性值為 2+4=6；同時(shí)按下左鍵和中鍵，則 button 屬性值為 1+4=5；同時(shí)按下 3 個(gè)鍵，則 button 屬性值為 1+2+4=7。

但是 DOM 模型不支持這種掩碼技術(shù)，如果同時(shí)按下多個(gè)鍵，就不能夠準(zhǔn)確偵測。例如，按下右鍵（2）與同時(shí)按下左鍵和右鍵（0+2=2）的值是相同的。因此，對于 DOM 模型來說，這種 button 屬性約定值存在很大的缺陷。不過，在實(shí)際開發(fā)中很少需要同時(shí)檢測多個(gè)鼠標(biāo)按鈕問題，一般僅需要探測鼠標(biāo)左鍵或右鍵單擊行為。

示例

下面代碼能夠監(jiān)測右鍵單擊操作，并阻止發(fā)生默認(rèn)行為。

document.onclick = function (e) {
    var e = e || window.event;  //標(biāo)準(zhǔn)化事件對象
    if (e.button == 2) {
        e.preventDefault();
        return false;
    }
}    

當(dāng)鼠標(biāo)單擊事件發(fā)生時(shí)，會(huì)觸發(fā)很多事件：mousedown、mouseup、click、dblclick。這些事件響應(yīng)的順序如下：

mousedown → mouseup → click → mousedown → mouseup → click → dblclick

當(dāng)鼠標(biāo)在對象間移動(dòng)時(shí)，首先觸發(fā)的事件是 mouseout，即在鼠標(biāo)移出某個(gè)對象時(shí)發(fā)生。接著，在這兩個(gè)對象上都會(huì)觸發(fā) mousemove 事件。最后，在鼠標(biāo)進(jìn)入對象上觸發(fā) mouseover 事件。

到此這篇關(guān)于js中的鼠標(biāo)事件有哪些（用法示例學(xué)習(xí)）的文章就介紹到這了,更多相關(guān)js鼠標(biāo)事件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論