D3：如何同时设置“click”事件和“dbclick”事件？

Question

我已经将单击事件切换到一个节点上，并且我也想将双击事件切换到它上面。但是，当我双击它时，它只会触发单击事件。

那么，我该如何同时设置这两个事件？

- SolessChong

Answer 1

你需要自己完成 "双击检测" 功能。

以下方式可能有效：

var clickedOnce = false;
var timer;

$("#test").bind("click", function(){
    if (clickedOnce) {
        run_on_double_click();
    } else {
        timer = setTimeout(function() {
           run_on_simple_click(parameter);
        }, 150);
        clickedOnce = true;
    }
});

function run_on_simple_click(parameter) {
    alert(parameter);
    alert("simpleclick");
    clickedOnce = false;
}

function run_on_double_click() {
    clickedOnce = false;
    clearTimeout(timer);
    alert("doubleclick");
}

这里有一个可用的JSFiddle

如需了解计时器应使用的延迟时间的更多信息，请查看此处：如何在元素上同时使用onclick和ondblclick？

- Jeremy D

---

我认为我们应该这样做：等待点击函数。如果在点击函数后一秒钟左右没有任何反应，则弹出“单击”警报。或者，如果第二次点击事件在第一次点击后一秒钟内发生，则弹出“双击”警报。你觉得呢？ - Swaroop Nagendra

这是我的做法。但我设置的延迟可能太小了。如果你想要尝试点击/双击而不必像疯子一样点击，请尝试调整它。 :D - Jeremy D

很棒的解决方案。但是有没有办法将参数传递给超时回调函数？ - SolessChong

我自己找到了答案。这是我的问题的解决方案链接：https://dev59.com/LG035IYBdhLWcg3wQt2n#5520159 - SolessChong

@SolessCHong，我的解决方案已经接近了。你在问题中没有指定需要回调的参数。我编辑了我的答案来考虑这一点。 - Jeremy D

@JeremyD 是的，你的解决方案对我的问题非常完美，这是一个后续问题。 - SolessChong

Answer 2

$("#test-id").bind("click dblclick", function(){alert("hello")});

适用于单击和双击

编辑--

我认为这是不可能的。我试图做类似于这样的事情。

$("#test").bind({
    dblclick: function(){alert("Hii")},
    mousedown: function(){alert("hello")}

});

但是不经过单击无法达到双击。我尝试了鼠标按下但它没有提供任何解决方案。

- Swaroop Nagendra

---

如何将不同的功能绑定到这两个事件？ - SolessChong

所以您需要一个单击和另一个双击的两个不同函数？ - Swaroop Nagendra

你应该使用自定义双击事件，因为在实践中很难本地检测到单击是否是双击，因为双击由两个单击组成。只需使用一个函数，在其中检查用户在一定时间内是否连续点击两次即可。 - Jeremy D

@SwaroopNagendra 在你的示例中，双击没有效果。警报会在第一次单击时显示出来。 - Jeremy D

是的，他是正确的。到达双击的唯一方法是通过两次单击。我不知道是否可能。 - Swaroop Nagendra

可以通过设置超时时间来实现。请看下面的答案。 - Jeremy D

Answer 3

我基本上使用了Jeremy D.相同的逻辑。

然而，在我的情况下，更加简洁的解决方法是使用匿名函数和稍微慢一点的双击超时时间：

dblclick_timer = false
.on("click", function(d) {
    // if double click timer is active, this click is the double click
    if ( dblclick_timer )
    {
        clearTimeout(dblclick_timer)
        dblclick_timer = false
        // double click code code comes here
        console.log("double click fired")
    }
    // otherwise, what to do after single click (double click has timed out)
    else dblclick_timer = setTimeout( function(){
        dblclick_timer = false
        // single click code code comes here
        console.log("single click fired")
    }, 250)
})

- Robin Manoli

Answer 4

一个稍微不同的方法 - 实际的点击比较发生在 timeOut 函数之后，经过预设的时间间隔... 在此之前，我们只需关注标志位即可。

通过一些简单的修改（使用点击计数器代替标志位），它也可以扩展到任意数量的快速连续点击（三击等），受实用性限制。

var clicked = false,
    dblClicked = false,
    clickTimer;



function onClick(param){
    console.log('Node clicked. param - ',param);
};

function onDoubleClick(param){
    console.log('Node Double clicked. param - ',param);
};

function clickCheck(param){
    if (!clicked){
        clicked = true;
        clickTimer = setTimeout(function(){
            if(dblClicked){
                onDoubleClick(param);
            }

            else if(clicked){
                onClick(param);
            }

            clicked = false;
            dblClicked = false;
            clearTimeout(clickTimer);

        },150);
    } else {
        dblClicked = true;
    }
};

- DhavalW

Answer 5

你需要跟踪双击事件，如果不是双击，则执行单击操作。 尝试这个。

<p id="demo"></p>
<button id='btn'>Click and DoubleClick</button>
<script>
var doubleclick =false;
var clicktimeoutid = 0;
var dblclicktimeoutid = 0;
var clickcheck = function(e){
    if(!clicktimeoutid)
        clicktimeoutid = setTimeout(function(){
            if(!doubleclick)
                performclick(e);
            clicktimeoutid  =0;
        },300);
}

var performclick =function(e){
     document.getElementById("demo").innerHTML += 'click';  
}
var performdblclick = function(e)
{
    doubleclick = true;
    document.getElementById("demo").innerHTML += 'dblclick';
    dblclicktimeoutid  = setTimeout(function(){doubleclick = false},800);
};
document.getElementById("btn").ondblclick = performdblclick;
document.getElementById("btn").onclick=clickcheck;
</script>

- Aamir Syed