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>
    复制代码
  • 相关阅读:
    Java 9 揭秘(9. 打破模块封装)
    Java 9 揭秘(8. JDK 9重大改变)
    好书分享 ——《深度工作》
    Java 9 揭秘(7. 创建自定义运行时映像)
    Java 9 揭秘(6. 封装模块)
    如何更好地管理你的精力,时间和专注力实现最佳表现
    这是您一直期待的所有iOS 11功能的屏幕截图
    我为什么不敢也不想写自己的经验和想法?
    无聊? 现在你知道为什么了!
    Java 9 揭秘(5. 实现服务)
  • 原文地址:https://www.cnblogs.com/129TL/p/9758348.html
Copyright © 2011-2022 走看看