js教程

學習js滑鼠按下觸發移入事件的解決方法

php是最好的语言

Jul 24, 2018 pm 03:33 PM

滑鼠事件是滑鼠按鈕被按下（左鍵或右鍵）時觸發。不能透過鍵盤觸發。滑鼠事件觸發的順序是怎麼樣的？以下給出了詳細的例子，

滑鼠事件

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>

相關推薦：

JavaScript事件學習小結(二)js事件處理程序

javaScript事件學習小結（四）event的公共成員（屬性與方法）

JavaScript事件學習小結（三）js事件物件

JavaScript事件學習小結(一）事件流

影片：JavaScript滑鼠經過事件(onmouseover) -javascript初級教學

以上是學習js滑鼠按下觸發移入事件的解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript數據類型：瀏覽器和nodejs之間是否有區別？May 14, 2025 am 12:15 AM

JavaScript核心數據類型在瀏覽器和Node.js中一致，但處理方式和額外類型有所不同。 1)全局對像在瀏覽器中為window，在Node.js中為global。 2)Node.js獨有Buffer對象，用於處理二進制數據。 3)性能和時間處理在兩者間也有差異，需根據環境調整代碼。

JavaScript評論：使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript：開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型，適合科學計算和數據分析。 2.JavaScript採用弱類型，廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢，選擇時應根據項目需求決定。

Python vs. JavaScript：選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型：1)數據科學和自動化任務選擇Python；2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞，而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript：了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢，選擇取決於項目需求和個人偏好。 1.Python易學，語法簡潔，適用於數據科學和後端開發，但執行速度較慢。 2.JavaScript在前端開發中無處不在，異步編程能力強，Node.js使其適用於全棧開發，但語法可能複雜且易出錯。

JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。

JavaScript應用程序：從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗，後端通過Node.js處理服務器任務。 1.前端示例：改變網頁文本內容。 2.後端示例：創建Node.js服務器。

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

See all articles