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

【问题标题】：D3: How do I set "click" event and "dbclick" event at the same time?D3：如何同时设置“click”事件和“dbclick”事件？
【发布时间】：2013-08-20 20:37:31
【问题描述】：

我已经将点击事件切换到一个节点，我也想将一个 dbclick 事件切换到它。但是它只会在我点击它时触发点击事件。

那么如何同时设置两个事件呢？

【问题讨论】：

标签： javascript event-handling d3.js double-click

【解决方案1】：

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

适用于 click 和 dblclick

编辑 --

我认为这是不可能的。我正在尝试这样的事情。

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

});

但是不通过单击就不可能达到双击。我试过鼠标按下，但它没有给出任何解决方案。

【讨论】：

这两个事件如何绑定不同的函数？
所以你想要一个两个单独的函数。一个用于单击，另一个用于双击？
您可能应该进行自定义双击，因为实际上不可能检测到单击是否为原生双击，因为双击由两次单击组成。只需使用一个函数来检查用户是否在一定时间内点击了两次。
@SwaroopNagendra dblclick 在您的示例中无效。第一次点击时会显示警报。
是的，他是对的。到达 dblclick 的唯一方法是单击两次。不知道有没有可能

【解决方案2】：

你必须自己做双击检测

类似的东西可以工作：

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

有关应为计时器使用的延迟的更多信息，请查看此处：How to use both onclick and ondblclick on an element?

【讨论】：

我认为我们应该这样做：等待点击功能。如果单击功能后一秒钟左右没有任何反应，则警报（“单击”）。或者，如果在第一次单击后一秒钟内有另一个单击事件，则警报（“dbl click”）。你怎么看？
这就是我所做的。但是我放的延迟可能太小了。如果您想体验单击/双击而不必疯狂地单击，请尝试使用它。 :D
很好的解决方案。但是有什么方法可以将参数传递给超时回调？
我自己找到的。这是solution to my question
@SolessCHong，我的解决方案很接近。您没有在问题中指定您需要回调参数。我编辑了我的答案以考虑到这一点。

【解决方案3】：

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

<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>

【讨论】：

【解决方案4】：

我几乎使用了与 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)
})

【讨论】：

【解决方案5】：

一种稍微不同的方法 - 实际的点击比较发生在 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;
    }
};

【讨论】：