所以我有一个表单,双击一个字段会弹出一个自定义模式窗口。模态窗口上的“保存”和“取消”按钮具有调用模态窗口层上的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);*/
});
});
最佳答案
一开始我以为问题出在传播上,所以我给你的事件加了一个stopPropagation。但后来我发现传播的不是双击。问题是完全不同的,即第二次点击(双击以关闭黑色覆盖)再次登陆输入字段,再次触发输入框上的双击事件。
所以您所要做的就是移动“保存”和“取消”按钮,使它们不直接位于输入字段的顶部。
我对您的 jsfiddle 做了一点改动来说明: https://jsfiddle.net/e51rc24j/6/
如果您双击“问题”,模态黑色 div 将再次打开,因为您的第二次单击位于 <input>
内部。文本域。
但是,如果您双击黑色 div 中的其他任何地方(“没问题”),它将无法打开。
关于javascript - 双击\隐藏上层时防止下层双击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35157763/