D3: Làm cách nào để đặt sự kiện "nhấp" và sự kiện "dbclick" cùng một lúc?

Question

Tôi đã chuyển đổi sự kiện nhấp chuột thành một nút và tôi cũng muốn chuyển đổi sự kiện dbclick thành nó. Tuy nhiên nó chỉ kích hoạt sự kiện nhấp chuột khi tôi dbclick vào nó.

Vậy làm cách nào để đặt cả hai sự kiện cùng một lúc?

Answer 1

Bạn phải làm của bạn "sở hữu" phát hiện DoubleClick

Something như thế có thể làm việc:

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"); 
} 

Đây là một công tác JSFiddle

Để biết thêm thông tin về những gì trì hoãn bạn nên sử dụng cho bộ hẹn giờ của bạn, hãy xem tại đây: How to use both onclick and ondblclick on an element?

Answer 2

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

trình cho cả chuột và dblclick

EDIT -

Tôi nghĩ mình không thể. Tôi đã thử một cái gì đó như thế này.

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

}); 

Nhưng không thể đạt được nhấp đúp mà không phải trải qua một cú nhấp chuột. Tôi đã thử di chuột xuống nhưng không đưa ra bất kỳ giải pháp nào.

Answer 3

bạn cần phải theo dõi nhấp đúp và nếu nó không phải là gấp đôi c liếm thực hiện hành động nhấp chuột. Hãy thử

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

Answer 4

tôi khá nhiều sử dụng logic này giống như Jeremy D.

Tuy nhiên, trong trường hợp của tôi, nó là gọn gàng hơn để giải quyết điều này với các chức năng ẩn danh, và một chút thời gian chờ nhấn đúp chuột chậm :

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

Answer 5

cách tiếp cận hơi khác - Lần so sánh nhấp thực tế xảy ra sau trong khoảng thời gian định trước, chúng tôi chỉ cần giữ tab trên cờ.

& với một số sửa đổi đơn giản (nhấp chuột thay vì cờ) nó cũng có thể được mở rộng đến bất kỳ số nhấp chuột liên tiếp nhanh nào (ba lần nhấp, et al), bị giới hạn bởi tính thực tiễn.

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