如何防止焦点事件中的鼠标关闭事件?

Question

我是jQuery的初学者，我添加了一个jQuery，以便在按钮的焦点消失时保持某些div元素在视图中，而其他div元素隐藏(单击元素外部(。但是，当您向下单击按钮时，您会看到"显示"元素。如何防止这种情况发生？我尝试了一个.mousedownreturn default动作，但没有运气。

$(".table-btn").focusout(function() {
$("#pricelist0").show();
$("#pricelist1, #pricelist2").hide();
})

编辑：
我创建了一个小提琴来使问题更加明显，因此当您单击另一个按钮时，会出现 pricelist0。

额外：
有了给定的答案，并且为了能够在单击某些元素时不会失去按钮的焦点，您可以另外添加以下代码。任何元素是您希望保持按钮聚焦的元素。

var lastFocus;
$("any element").mousedown(function(e) {
return false;
});    
$(".table-btn").blur(function() {
lastFocus = this;
});

Answer 1

当您单击#pricelist1或#pricelist2时，它会触发另一个按钮的focusout，这就是显示#pricelist0的原因。

试试这个;

$(document).on("click", ":not(.table-btn)", function(e){
if(e.target !== this)
return;
$("#pricelist0").show();
$("#pricelist1, #pricelist2").hide();
});
$("#1").click(function(){
$("#pricelist1").show();
$("#pricelist2, #pricelist0").hide();
});
$("#2").click(function(e){
$("#pricelist2").show();
$("#pricelist1, #pricelist0").hide();
});