Question

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

这是一个通常解释问题的小提琴。 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。但后来我发现这不是传播的双击。问题是完全不同的，即在输入字段上再次点击（双击以关闭黑色叠加层）LANDS，这会再次触发输入框上的双击事件。

所以你需要做的就是移动SAVE和CANCEL按钮，使它们不直接位于输入字段的顶部。

我对你的jsfiddle进行了一些改动来说明： https://jsfiddle.net/e51rc24j/6/

如果双击“问题”，模态黑色div将再次打开，因为您的第二次点击会在<input>文本字段内。但是，如果您双击黑色div中的任何其他位置（“不是问题”），它将无法打开。

双击\隐藏更高层时，防止下层双击事件

1 个答案: