Javascript 避免$（文档）。单击以获取某些文本字段

我有两个文本字段和一个按钮，还有一个

$（文档）。单击
函数可触发
showItems（）
函数

我的问题是，如果用户当前正在这两个文本字段中键入任何内容，如何避免触发
showItems（）

<input type="text" id="tf1">
<input type="text" id="tf2">
<button id="bt1">Preference</button>

最简单的解决方案是：

<input type="text" id="tf1" onclick="event.stopPropagation()">



单击事件从单击的元素中弹出DOM。这样可以防止它冒泡，并且永远不会到达文档根。
使用
。没有目标的click（）
函数从来都不是一个好主意。而是将按钮用作单击事件的目标，例如：

<input type="text" id="tf1">
<input type="text" id="tf2">
<button id="bt1">Preference</button>

$("#bt1").click(function(){
    if (typeof showItems() == "function") { 
       showItems();
    }        
});


偏爱
$（“#bt1”）。单击（函数（）{
如果（showItems（）的类型=“函数”）{
showItems（）；
}        
});

但我不确定您希望单击事件何时实际触发

防止事件在DOM树中冒泡，防止任何父处理程序收到事件通知


$（文档）。单击（函数（）{
if（showItems的类型==“函数”）{
showItems（）；
}
});
函数showItems（）{
console.log（'Here！'）；
}
$（'#tf1，#tf2'）。on（'click'，函数（e）{
e、 停止传播（）；
});

首选项
您可以检查单击是否通过了
#tf1
或
#tf2
：

$(document).click(function(e) {
    if ($(e.target).closest("#tf1, #tf2").length) {
      return;
    }
    if (typeof showItems == "function") {
        showItems();
    }
});

示例：


$（文档）。单击（函数（e）{
if（$（e.target）.closest（“#tf1，#tf2”）.length）{
回来
}
$（“单击“
”）.appendTo（document.body）；
});

偏爱
@Becky:刚刚更新，我不知道为什么我没有首先使用
“#tf1，#tf2”
。是否可以将
#bt1
也包括在内？@Becky:是的，您可以向组中添加任何相关的选择器。