javascript - 在覆盖 div 中完成第一次单击时触发双击

Question

我在下面有一个覆盖 div 和一个按钮，并附加了一个双击事件。单击覆盖时，它应该被隐藏。如果我双击叠加层，将鼠标悬停在按钮上，则会在按钮中触发双击事件。这是正确的行为吗？我做错什么了吗？是否有任何解决方法可以防止触发按钮？

代码示例：

var $container = $('#absolute-container');
var $button = $('#button');

// On container click, hide the container
$container.on('click', function (e) {
    e.stopPropagation();
  e.preventDefault();
    $container.hide();
});

$button.on('dblclick', function () {
    alert('double click');
});

这是一个带有示例的 jsfiddle： https ://jsfiddle.net/o0qsbd43/18/

谢谢

标签： javascriptjquerydouble-click

Answer 1

你需要有一个非常小的延迟来触发 normal click action，当发生这种情况时你会取消它double click event。

参考：https ://css-tricks.com/snippets/javascript/bind-different-events-to-click-and-double-click/

var $container = $('#absolute-container');
var $button = $('#button');

function doClickAction(e) {
  e.stopPropagation();
  e.preventDefault();
  $container.hide();
}

function doDoubleClickAction(e) {
  e.stopPropagation();
  e.preventDefault();
}

var timer = 0;
var delay = 200;
var prevent = false;

$container
  .on("click", function(e) {
    timer = setTimeout(function() {
      if (!prevent) {
        doClickAction(e);
      }
      prevent = false;
    }, delay);
  })
  .on("dblclick", function(e) {
    clearTimeout(timer);
    prevent = true;
    doDoubleClickAction(e);
 });



$button.on('dblclick', function () {
	alert('double click');
});

.absolute-container {
  background: black;
  opacity: 0.5;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="absolute-container" class="absolute-container" ></div>
<div>
  <button id="button">Double Click Button</button>
</div>