HTML DOM-->鼠標事件單擊(click)與雙擊(dblclick)

本文轉載自查看原文 2020-04-22 22:55 2935 javascript

1.定義和使用

　　click：單擊事件

　　dblclick：雙擊事件

　　注意：區分單擊還是雙擊，使用延時定時器

　　代碼如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>js_excise</title>    
    </head>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
    </style>
    <body>
        <div id="box"></div>         
        <script type="text/javascript">
            //單機事件
            var time
            var jsBox = document.getElementById('box')
            jsBox.addEventListener('click',function(){
                //先清除一次
                clearTimeout(time)
                //再執行計時器
                time = window.setTimeout(function(){
                    console.log('單機')
                },250)
            },false)
            
            //雙擊事件
            jsBox.addEventListener('dblclick',function(){
                // 清除第二次單機計時器
                clearTimeout(time)
                console.log('雙擊')
            },false)
        </script>
    </body>
</html>

　　輸出：

　　程序運行原理：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jquery雙擊事件(dblclick)時，不觸發單擊事件(click) jQuery 雙擊事件（dblclick）時，不觸發單擊事件(click) vue給同一元素綁定單擊click和雙擊事件dblclick，執行不同邏輯 vue.js同一元素實現單擊click和雙擊事件dblclick,執行不同功能 HTML DOM-->焦點事件[focus()/blur()] Angular JS中雙擊事件ng-dblclick避免同時觸發兩次單擊事件ng-click的解決方案 js實現鼠標單擊或者雙擊事件給html元素綁定單擊和雙擊事件 HTML DOM-->事件對象(阻止冒泡、阻止默認行為) HTML DOM-->鍵盤事件：keydown/keyup/keypress