double click

by yshrkn

HTML

<button id="myButton">Button</button><br>
<output id="result"></output>

CSS

#result {
  display: inline-block;
  height: 1em;
  padding: 5px;
  background-color: white;
  border: 2px solid black;
  min-width: 100px;
}

JavaScript

/**
 * a)ダブルクリックか、b)シングルクリックかを自前で判定してください。
 * 500ミリ秒以内に連続してボタンを2回クリックした場合は、ダブルクリックとみなしてください。
 *
 * aの場合はダブルクリック、bの場合は「シングルクリック」と、
 * #resultに出力してください。
 */

var btn = document.getElementById('myButton');
var output = document.getElementById('result');
var recentClickDate;

btn.addEventListener('click', function() {
  if (recentClickDate !== undefined) {
  	var startDate = new Date();
    
    var isDoubleClick = (startDate - recentClickDate) < 500 ? true : false;
		console.log("差：", startDate - recentClickDate)

		recentClickDate = startDate;

    if (isDoubleClick) {
      output.textContent = "ダブルクリック";
    } else {
      output.textContent = "シングルクリック";
    }
    
  } else {
    
    recentClickDate = new Date();
    setTimeout(function() {
      output.textContent = "シングルクリック";
    }, 500);
  }
 });