代码之家  ›  专栏  ›  技术社区  ›  Daddy Warbox

当检测到双击事件时,需要取消单击/鼠标悬停事件

  •  41
  • Daddy Warbox  · 技术社区  · 15 年前

    这是怎么做到的?

    5 回复  |  直到 15 年前
        1
  •  79
  •   Xavi López    12 年前

    这是一个很好的问题,实际上我认为这不容易做到。( Some discussion on this )

    如果拥有此功能对您来说非常重要,您可以像这样破解它:

    function singleClick(e) {
        // do something, "this" will be the DOM element
    }
    
    function doubleClick(e) {
        // do something, "this" will be the DOM element
    }
    
    $(selector).click(function(e) {
        var that = this;
        setTimeout(function() {
            var dblclick = parseInt($(that).data('double'), 10);
            if (dblclick > 0) {
                $(that).data('double', dblclick-1);
            } else {
                singleClick.call(that, e);
            }
        }, 300);
    }).dblclick(function(e) {
        $(this).data('double', 2);
        doubleClick.call(this, e);
    });
    

    example of it at work .

    正如评论中所指出的,有一个插件可以实现我在上面所做的功能,但是可以为您打包,这样您就不必看到丑陋的一面: FixClick

        2
  •  34
  •   NickFitz    15 年前

    Raymond Chen已经讨论了一些问题 implications of single-versus-double clicking -虽然他是在Windows环境下讲的,但他所说的与基于浏览器的UI设计相关。

    基本上,双击所采取的行动应该是在单击一次之后进行的合乎逻辑的事情。因此,例如,在桌面UI中,单击一个项目,然后双击将其打开(例如,打开文件或启动应用程序)。用户必须选择文件才能打开它,因此在双击操作之前执行单击操作并不重要。

    如果您仍然想这样做,那么您必须使用去抖动技术(在这种情况下,所有的单击操作都将延迟),或者实现某种机制,双击处理程序将撤销单击处理程序所做的工作。

    您还应该知道,有些用户设置了很长的双击时间。例如,患有关节炎的手可能在其系统偏好中双击时间超过一秒,因此,基于您选择的任意时间段的去抖动技术将使这些人无法访问您的UI组件,如果执行单键单击操作排除了执行双击操作。据我所知,“撤销单击时发生的事情”技术是唯一可行的解决方法。

        3
  •  7
  •   Walter Rumsby    15 年前

    其他答案中概述的技巧称为 debouncing

        4
  •  1
  •   Chris Frederick    13 年前

    jQuerySparkle通过实现一个单击定制事件,为这一点提供了一个简洁优雅的解决方案。通过这样做,您可以像使用任何其他事件一样使用它,因此:

    $('#el').singleclick(function(){});
    // or event
    $('#el').bind('singleclick', function(){});
    

    它还为一系列单击的最后一次和第一次单击提供自定义事件。而lastclick定制事件实际上会将点击量传递回去!所以你可以这么做!

    $('#el').lastclick(function(event,clicks){
        if ( clicks === 3 ) alert('Tripple Click!');
    });
    

    here .

    它是AGPL许可证下的开源软件,因此您可以放心地从中获取所需内容它还在日常基础上积极开发,因此您永远不会缺少支持。

    但最重要的是,它是一个干式插件/效果框架,允许您更轻松地开发插件和扩展。因此,希望这有助于实现这一目标!

        5
  •  0
  •   Katie Kilian Fenton    13 年前

    $(selector).click(function(e) {
        $(this).prop('disable', true);
    }