滑鼠事件

DOM3級事件中定義了9個滑鼠事件。

mousedown:滑鼠按鈕被按下（左鍵或右鍵）時觸發。不能透過鍵盤觸發。
mouseup:滑鼠按鈕被釋放彈起時觸發。不能透過鍵盤觸發。
click:點選滑鼠左鍵或按下回車鍵時觸發。這對確保易訪問性很重要，意味著onclick事件處理程序既可以透過鍵盤也可以透過滑鼠執行。
dblclick:雙擊滑鼠左鍵時觸發。
mouseover:滑鼠移入目標元素上方。當滑鼠移到其後代元素上時會觸發。
mouseout:滑鼠移出目標元素上方。
mouseenter:滑鼠移入元素範圍內觸發，該事件不冒泡，即滑鼠移到其後代元素上時不會觸發。
mouseleave:滑鼠移出元素範圍時觸發，該事件不冒泡，即滑鼠移到其後代元素時不會觸發。
mousemove:滑鼠在元素內部移到時不斷觸發。不能透過鍵盤觸發。

note:

在一個元素上相繼觸發mousedown和mouseup事件，才會觸發click事件。兩次click事件相繼觸發才會觸發dblclick事件。

如果取消了mousedown或mouseup中的一個，click事件就不會被觸發。直接或間接取消了click事件，dblclick事件就不會被觸發了。

1、事件觸發的順序

舉例：透過雙擊按鈕，看一下上面觸發的事件。

<input id="btn" type="button" value="click"/><script>
    var btn = document.getElementById("btn");
    btn.addEventListener("mousedown",function(event){
        console.log("mousedown");
    },false);
    btn.addEventListener("mouseup",function(){
        console.log("mouseup");
    },false);
    btn.addEventListener("click", function () {
        console.log("click");
    },false);
    btn.addEventListener("dblclick", function () {
        console.log("dblclick");
    },false);</script>

登入後複製

View Code

#2、mouseenter和mouseover的區別

區別：

mouseover事件會冒泡，這意味著，滑鼠移到其後代元素上時會觸發。

mouseenter事件不冒泡，這意味著，滑鼠移到其後代元素上時不會觸發。

範例：

<!DOCTYPE html><html><head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #outer{            position: absolute;            width: 200px;            height: 200px;            top:0;            left: 0;            bottom:0;            right: 0;            margin: auto;            background-color: pink;        }
        #inner{            position: absolute;            width: 100px;            height:100px;            top:50%;            left:50%;            margin-left: -50px;            margin-top: -50px;;
            background-color: orange;            text-align: center;            line-height: 100px;        }
        #outer,#inner{            border-radius:50%;        }
    </style>
    <script src="jquery-2.1.1.min.js"></script></head><body><body>
    <p id="outer">
            <p id="inner">
            </p>
    </p></body><script>
    var parentp = document.getElementById("outer");
    parentp.addEventListener("mouseover", function () {
         console.log("父p的mouseover事件被触发");
    },false);    //parentp.addEventListener("mouseenter", function () {
    //    console.log("父p的mouseenter事件被触发");
    //},false);
    //parentp.addEventListener("mouseout", function () {
    //    console.log("父p的mouseout事件被触发");
    //},false);
    //parentp.addEventListener("mouseleave", function () {
    //    console.log("父p的mouseleave事件被触发");
    //},false);</script></body></html>

登入後複製

View Code

#note:

mouseover對應mouseout,mouseenter對應mouseleave。效果可以取消上面程式碼的註解來看。

jquery中hover API是把mouseenter 和mouseleave組合在一起來用的。

3、滑鼠左鍵與右鍵

<script type="text/javascript">document.onmousedown=function (ev){
    var oEvent = ev||event; //IE浏览器直接使用event或者window.event得到事件本身。
    alert(oEvent.button);// IE下鼠标的 左键是1 ，  右键是2   ff和chrome下 鼠标左键是0  右键是2};</script>

登入後複製