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/

谢谢

Answer 1

发射正常的click action时需要稍有延迟，而在double click event发生时您可以取消。

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

Answer 2

我认为释放松开按钮时会触发单击和双击事件事件。双击是一个单次事件，可计算两次单击之间的时间。在您的情况下，您可以单击释放按钮，但要触发双击，浏览器仍在等待，如果在一秒钟左右的时间内会再次单击并释放按钮，具体取决于操作系统配置。因此，在您的情况下，第二单击释放发生在按钮顶部，并且触发了双击事件。

我建议的解决方案是在隐藏叠加层时进行延迟。例如，如果您要设置1秒钟的超时时间，并且在此超时时间内产生淡入淡出效果或类似的效果，则浏览器等待第二次点击以触发双击的时间间隔将会过期，您可以双击按钮。请注意，我已经正确，直观地解释了。

在叠加层div中进行首次点击时会触发双击

2 个答案: