zoukankan      html  css  js  c++  java
  • jquery 单击和双击事件冲突解决方案

    引起冲突的代码:

    问题效果展示:

    每一次触发双击事件都会引起两次单击事件

    解决冲突的代码:

    解决问题效果展示:

    完美解决单击事件和双击事件冲突问题

    这里主要用到两个HTML DOM Window对象中函数,settimeout(),clearTimeout()

    我这里两个单击事件触发的时间间隔设置在等于300毫秒,这里需要根据实际情况而定。

    源码如下:

    复制代码
    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
    
        <body>
            <div>事件监控</div>
        </body>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript">
            /*$(function() {
                        $("div").bind("click.a", function() { //单击事件 
                            $("body").append("<p>click事件</p>");
                        })
                        $("div").bind("dblclick.a", function() { //双击事件 
                            $("body").append("<p>dblclick事件</p>");
                        })
                        $("div").bind("mouseover.a", function() { //鼠标经过元素的事件 
                            $("body").append("<p>mouseover事件</p>");
                        })
                        $("div").bind("mouseout.a", function() { //鼠标移出元素的事件 
                            $("body").append("<p>mouseout事件</p>");
                        })
                    })*/
            $(function() {
                var timer = null;
                $("div").bind("click.a", function() { //单击事件 
                    clearTimeout(timer);
                    timer = setTimeout(function() { //在单击事件中添加一个setTimeout()函数,设置单击事件触发的时间间隔 
                        $("body").append("<p>click事件</p>");
                    }, 300);
                })
                $("div").bind("dblclick.a", function() { //双击事件 
                    clearTimeout(timer); //在双击事件中,先清除前面click事件的时间处理 
                    $("body").append("<p>dblclick事件</p>");
                })
                $("div").bind("mouseover.a", function() { //鼠标经过元素的事件 
                    $("body").append("<p>mouseover事件</p>");
                })
                $("div").bind("mouseout.a", function() { //鼠标移出元素的事件 
                    $("body").append("<p>mouseout事件</p>");
                })
            })
        </script>
    
    </html>
    复制代码
  • 相关阅读:
    怎么让图片居中显示?
    上传代码出现弹出框“请确保已在git中配置您的user.name和user.email”解决方法
    window.open()下载文件: 在当前页面打开方法
    修改网站颜色为黑白 (100% 灰度)/全页置灰
    ZMQ简单使用
    CCXT
    Python描述符详解
    自定义序列的修改、散列和切片
    使用__slots__类属性节省空间
    QGraphicsView实现虚拟摇杆
  • 原文地址:https://www.cnblogs.com/129TL/p/9758348.html
Copyright © 2011-2022 走看看