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

我已经将click事件切换到一个节点，我还想将dbclick事件也切换到它。然而，只有当我点击它时，它才会触发点击事件

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

您必须自己进行双击检测

类似的东西可以工作：

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？

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

适用于点击和dblclick

编辑--

我认为这是不可能的。我在尝试这样的东西。

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

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

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

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

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

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

相关内容

最新更新

热门标签：