jquery 對同一個對象單擊，雙擊事件處理

對同一個對象，同時監聽單擊事件和雙擊事件，利用setTimeout()對一定時間的點擊事件進行邏輯處理

例如：

　　

<div id="box">single-click<br>double-click</div>
<button>reset</button>

css樣式:

#box {
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lightgreen;
  margin-bottom: 20px;
}

js(引入jquery):

$(function() {

    var DELAY = 400,
          count = 0,
      timer = null;
      
    $("#box").on("click", function() {
      count++; // count clicks
    
    if (count === 1) {  // perform a single click
        timer = setTimeout(function() {
      
          $("#box").css("background-color", "red");  // can't use $(this), cus this refers to timer
        
        count = 0;  // after performed action, reset counter
      }, DELAY)
    } else {
        clearTimeout(timer); // prevent single click action
        $(this).css("background-color", "yellow");
      count = 0;
    }
  })
  .on("dblclick", function(e) {
      e.preventDefault(); // cancel default action, usual for an anchor
  });
  
  $("button").on("click", function() {
      $("#box").css("background-color", "lightgreen");
  })
})

最終效果： https://jsfiddle.net/JamesSawyer/ypw0pb4z/