js实现——鼠标单击事件-onclick和双击事件-ondblclick

最新推荐文章于 2024-08-19 16:42:45 发布

viceen

最新推荐文章于 2024-08-19 16:42:45 发布

阅读量2.9k

点赞数

分类专栏： js知识 vue项目-运维文章标签： js css javascript reactjs

本文链接：https://blog.csdn.net/weixin_44867717/article/details/117870413

版权

js知识同时被 2 个专栏收录

152 篇文章 13 订阅

订阅专栏

vue项目-运维

111 篇文章 2 订阅

订阅专栏

本文介绍了JavaScript中如何使用onclick和ondblclick事件处理单击和双击操作。通过示例代码展示了不同方法的用法，包括直接绑定事件处理函数和使用setTimeout来区分单击与双击。此外，还讨论了同时绑定两个事件时可能遇到的问题及解决方案。

摘要由CSDN通过智能技术生成

js实现——鼠标单击事件-onclick和双击事件-ondblclick

onclick：单击
ondblclick：双击

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 方法一 -->
    <button id="clickBtn1">单击/双击按钮1</button>
    <!-- 方法二 -->
    <button onclick="btnClick()" ondblclick="sClick()">单击/双击按钮2</button>
    <!-- 定稿 -->
    <button onclick="dClick()">单击</button>
    <button ondblclick="dblclick()">双击按钮</button>
    <button onclick="dClick()" ondblclick=" dblclick()">单击/双击按钮</button>
    <script>
        // 方法一
        var clickBtn = document.getElementById("clickBtn1");
        clickBtn.onclick = function () {
            console.log("单击==")
        }

        clickBtn.ondblclick = function () {
            console.log("双击---");
        }

        // // 方法二
        function btnClick(e) {
            console.log("单击==")
        }

        function sClick(e) {
            console.log("双击---");
        }

        // 定稿
        var time = null;
        //单击事件
        function dClick(e) {
            // console.log("单击=====")
            //取消上次延时未执行的方法
            clearTimeout(time); //首先清除计时器
            //设置延时300ms
            time = setTimeout(function () {
                //   time = setTimeout( ()=> {
                //在此写单击事件要执行的代码
                console.log("单击==")
            }, 300);
        }

        //双击事件
        function dblclick() {
            //取消上次延时未执行的方法
            clearTimeout(time);
            //下面写双击事件要执行的代码
            console.log("双击---");
        }
    </script>
</body>

</html>