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>
    复制代码
  • 相关阅读:
    tips
    数学建模-预测模型优缺(搬运)
    数学建模-灰色预测模型GM(1,1)_MATLAB
    Floyd算法_MATLAB
    第二章 运算方法与运算器(浮点数的加减法,IEEE754标准32/64浮点规格化数)
    面向对象
    for循环
    if---else
    airflow的web任务管理
    airflow原理
  • 原文地址:https://www.cnblogs.com/129TL/p/9758348.html
Copyright © 2011-2022 走看看