Question

我有2个文本字段和一个按钮以及$(document).click函数来触发showItems()功能。

我的问题是，如果用户当前在这两个文本字段中输入任何内容，如何避免触发showItems()？

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

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

Answer 1

您可以检查点击是通过#tf1还是#tf2：

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

示例：

$(document).click(function(e) { if ($(e.target).closest("#tf1, #tf2").length) { return; } $("<p>click</p>").appendTo(document.body); });

<input type="text" id="tf1"> <input type="text" id="tf2"> <button id="bt1">Preference</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

另请注意，在检查showItems的类型时，不希望()上有()，会调用检查它返回的类型。我已删除上面第一个代码块中的enter code here char temp[5]; unsigned int adc_value; char uart_rd; int i; unsigned int d[10]={0}; int average = 0; int counter =0; void main() { temp[0]='1'; temp[1]='2'; temp[2]='3'; temp[3]='4'; temp[4]=' '; OSCCON = 0x77; //ANSEL = 0; ANSEL = 0b00000100; CMCON0 = 0X07; TRISA = 0b00001100; // ADCON0 =0b1011; // ADCON1 &= 0b01000000; //ADCON1 |= 0b01000000; UART1_Init(9600); Delay_ms(100); while (1) { average=0; for(i=0;i<10;i++) { average+= ADC_Read(2); } average/=10; temp[0] = average/1000+48; temp[1] = (average/100)%10+48; temp[2] = (average/10)%10+48; temp[3] = average%10+48; for (i=0;i<5; i++) { UART1_Write(temp[i]); } } }。

Answer 2

最简单的解决方案是：

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

点击事件会从点击的元素中冒出DOM。这样你就可以阻止它冒泡，它永远不会到达文档根目录。

Answer 3

event.stopPropagation()阻止事件冒泡DOM树，防止任何父处理程序被通知事件

$(document).click(function() {
  if (typeof showItems == "function") {
    showItems();
  }
});

function showItems() {
  console.log('Here!');
}
$('#tf1,#tf2').on('click', function(e) {
  e.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="tf1">
<input type="text" id="tf2">
<button id="bt1">Preference</button>

Fiddle here

Answer 4

使用没有目标的.click()函数绝不是一个好主意。而是将按钮用作点击事件的目标，例如：

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

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

但我不确定您何时希望点击事件真正触发。

避免$（document）.click for some textfiels

4 个答案: