• jquery 单击和双击事件冲突解决方案


    本人需要给bootstrap-treeview的树节点添加双击事件。而该插件原生方法中不带双击事件功能。该插件的节点默认绑定的单击事件,由此引起了单击事件和双击事件的冲突。

    编写测试代码

    引起冲突的代码:

    问题效果展示:

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

    解决冲突的代码:

    解决问题效果展示:

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

    这里主要用到两个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>
  • 相关阅读:
    javascript循环
    MySQL 1130错误,无法远程连接
    理解jquery的$.extend()、$.fn.extend()【jQuery插件机制】
    2019年Java Web最流行的开发框架总结
    Java Web项目启动执行顺序
    sql 为什么要用where 1=1?
    Hadoop(六)之HDFS的存储原理(运行原理)
    Hadoop(五)搭建Hadoop客户端与Java访问HDFS集群
    Hadoop(四)HDFS集群详解
    Hadoop(三)手把手教你搭建Hadoop全分布式集群
  • 原文地址:https://www.cnblogs.com/chengxuyuanzhilu/p/5071941.html
Copyright © 2020-2023  润新知