Javascript D3:我如何设置;点击";事件及;dbclick";同时发生的事件?
我已经将click事件切换到一个节点,我还想将dbclick事件切换到该节点。但是,它仅在我单击它时触发click事件 那么如何同时设置这两个事件呢Javascript D3:我如何设置;点击";事件及;dbclick";同时发生的事件?,javascript,event-handling,d3.js,double-click,Javascript,Event Handling,D3.js,Double Click,我已经将click事件切换到一个节点,我还想将dbclick事件切换到该节点。但是,它仅在我单击它时触发click事件 那么如何同时设置这两个事件呢 $("#test-id").bind("click dblclick", function(){alert("hello")}); 适用于click和dblclick 编辑-- 我认为这是不可能的。我试过这样的东西 $("#test").bind({ dblclick: function(){alert("Hii")}, mous
$("#test-id").bind("click dblclick", function(){alert("hello")});
适用于click和dblclick
编辑--
我认为这是不可能的。我试过这样的东西
$("#test").bind({
dblclick: function(){alert("Hii")},
mousedown: function(){alert("hello")}
});
但是,不通过单击就不可能实现双击。我试着按下鼠标,但它没有给出任何解决方案。您必须自己进行双击检测
类似的方法可能会奏效:
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");
}
这是一张工作票
有关计时器应使用的延迟的更多信息,请查看此处:您需要跟踪双击,如果不是双击,则执行单击操作。 试试这个
<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>
单击并双击
var doubleclick=false;
var clicktimeoutid=0;
var dblclicktimeoutid=0;
var clickcheck=功能(e){
如果(!clicktimeoutid)
单击TimeOutId=setTimeout(函数(){
如果(!双击)
performclick(e);
单击TimeOutId=0;
},300);
}
var performclick=函数(e){
document.getElementById(“demo”).innerHTML+=“单击”;
}
变量performdblclick=函数(e)
{
双击=真;
document.getElementById(“demo”).innerHTML+='dblclick';
dblclicktimeoutid=setTimeout(函数(){doubleclick=false},800);
};
document.getElementById(“btn”).ondblclick=performdblick;
document.getElementById(“btn”).onclick=单击检查;
我几乎使用了与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)
})
一种稍有不同的方法-实际的点击比较发生在超时函数的后面,在预设的时间间隔之后。。。在那之前,我们只是盯着旗帜 &通过一些简单的修改(点击计数器而不是标志),它还可以扩展到任意数量的快速连续点击(三次点击等),受实用性限制
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;
}
};
如何将不同的函数绑定到这两个事件?因此您需要一个或两个独立的函数。一个用于单键单击,另一个用于双击?您可能应该进行自定义双击,因为实际上无法检测单击是否是本地双击,因为双击由两次单击组成。只需使用一个函数,检查用户是否在一定时间内单击两次。@swaroopnagndra在您的示例中,dblclick无效。警报在第一次单击时显示。是的,他是对的。到达dblclick的唯一方法是单击两次。我不知道这是否可能。我想我们应该这样做:等待点击功能。如果单击功能后的一秒钟左右没有发生任何事情,则发出警报(“单次单击”)。或者,如果在第一次单击后的一秒内发生另一次单击事件,则发出警报(“dbl单击”)。你觉得呢?我就是这么做的。但我的延迟可能太小了。如果你想体验一下click/doubleclick,而不必疯狂地点击,试着玩一下它DGreat解决方案。但是,有没有办法将参数传递给超时回调?我自己找到的。这是@soleschong,我的解决方案很接近。您没有在问题中指定回调需要一个参数。我编辑了我的答案以考虑到这一点。