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

【问题标题】：Double click is being triggered when first click is done in an overlay div在覆盖 div 中完成第一次单击时触发双击
【发布时间】：2018-12-05 18:14:07
【问题描述】：

我有一个覆盖 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/

谢谢

【问题讨论】：

有趣的问题。这可能被认为是浏览器错误，但我还没有阅读有关当重叠元素受到初始事件影响时应如何处理单击/双击事件的规范。
为什么要使用 dblclick 事件？为什么不只听按钮上的老式点击？
我查了spec。它指出应该在...the primary button of a pointing device is clicked twice over an element 时调度 dblclick 事件，这似乎是您看到的行为的原因，因为指针在两次单击的按钮上 over。但是，规范还指出：the event target MUST be the same between mousedown, mouseup, and dblclick 不是这里的情况，因此我认为这是一个错误。

标签： javascript jquery double-click

【解决方案1】：

您需要在触发正常的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>

【讨论】：

【解决方案2】：

我认为当您释放 bouse 按钮时会触发单击和双击事件事件。双击是计算单击之间时间的单个事件。在您的情况下，您在单击时释放按钮，但要触发双击，浏览器仍在等待是否会有第二次单击并在大约一秒钟内释放按钮，具体取决于操作系统配置。因此，在您的情况下，第二次单击释放发生在按钮顶部并触发双击事件。

我可以建议的解决方案是在隐藏覆盖层时延迟。例如，如果您将进行 1 秒超时，并且在此超时期间会产生淡出效果或类似的效果，则浏览器等待第二次单击以触发双击的时间间隔甚至会过期，您可以双击按钮.请注意，我的解释正确且直观。

【讨论】：