javascript - 检测同时单击两个不同元素的情况

Question

我想在同时单击两个不同的元素时运行一些代码。显然我们只有一只鼠标，但在移动设备上这似乎是可能的，用户可以同时使用两根手指。

我找到了这个answer其中使用多个选择器来实现此类功能:

$('#someElement').mouseleave() || $('#someOtherElement').mouseleave()) {

// do something

});

但是，我想要实现的目标是使用 && 运算符更准确地表示:

$('#someElement').click() && $('#someOtherElement').click()) {

// do something

});

Answer 1

跟踪点击，并设置超时和您将接受的点击之间的时间间隔容差。在下面的示例中，如果在 1 秒内单击它们，则会触发逻辑:

(function(){
    var $el1 = $();
    var $el2 = $();
    var el1Clicked = false;
    var el2Clicked = false;
    var tolerance = 1000;

    var onEl1Click = function(){
        el1Clicked = true;

        setTimeout(function(){
            el1Clicked = false;
        }, tolerance);

        if(el2Clicked){
            //both are clicked within a tolerance
        }
    };

    var onEl2Click = function(){
        el2Clicked = true;

        setTimeout(function(){
            el2Clicked = false;
        }, tolerance);

        if(el1Clicked){
            //both are clicked within a tolerance
        }
    };

    $el1.on('click', onEl1Click);
    $el2.on('click', onEl2Click);
})();