javascript - 双击\隐藏上层时防止下层双击事件

Question

所以我有一个表单，双击一个字段会弹出一个自定义模式窗口。模态窗口上的“保存”和“取消”按钮具有调用模态窗口层上的hide() 的“单击”事件。然而，我们的一些用户自然会双击东西。双击保存或取消按钮会触发 click 事件并隐藏模态窗口，但也会触发模态窗口下方字段的双击事件，导致模态窗口再次显示。我知道使用 setTimeOut() 并延迟模​​态窗口的 hide() 将解决问题，但我不想尽可能降低 UI 的响应能力。有什么建议吗？

这是一个 fiddle ，可以大致说明问题。 https://jsfiddle.net/e51rc24j/4/

$(function() {
  $(".field").on("dblclick", function(ev) {
    $(".hoverlayer").show();
  });

  $(".hoverlayer").on("click", function(ev) {
    var thisLayer = this;
    $(thisLayer).hide(); 
    /* PUTTING IN DELAY ON HIDE SOLVES PROBLEM BUT I PREFER TO NOT DELAY UI RESPONSIVENESS IF POSSIBLE
    setTimeout(function(){ 
      $(thisLayer).hide(); 
    }, 300);*/
  });
});

Answer 1

一开始我以为问题出在传播上，所以我给你的事件加了一个stopPropagation。但后来我发现传播的不是双击。问题是完全不同的，即第二次点击(双击以关闭黑色覆盖)再次登陆输入字段，再次触发输入框上的双击事件。

所以您所要做的就是移动“保存”和“取消”按钮，使它们不直接位于输入字段的顶部。

我对您的 jsfiddle 做了一点改动来说明: https://jsfiddle.net/e51rc24j/6/

如果您双击“问题”，模态黑色 div 将再次打开，因为您的第二次单击位于 <input> 内部。文本域。但是，如果您双击黑色 div 中的其他任何地方(“没问题”)，它将无法打开。