logo标签列表

jQuery - 检测用户何时点击文本输入框之外的区域

jquery
30

我想检测用户在输入文本框外点击时的事件，而不是在内部点击时的事件。

以下是我的代码，但无论是在内部点击（聚焦）还是在外部点击，都会触发两个事件：

<input id="title" val="hello" />

$("#title").focusout(function() {
    console.log('inside');
}).blur(function() {
    console.log('outside');
});
3
“模糊”对于你所需的内容是足够的。具体问题是什么？ - Teja Kantamneni
1
你确定吗？当我“离开”字段时，它们都会触发。示例 - user113716
请澄清您的问题。您所描述的事件发生情况与实际相反。您是真的在说当单击输入框内部时，focusout和blur会触发吗？ - user113716
我很确定$(el).focusout().blur()不是一个好主意...但我喜欢在元素外点击的概念！ - Derek Adair
4个回答
67

你可以像这样绑定你的focus和blur事件：

<input id="title" val="hello" type="text" />

$("#title").focus(function() {
    console.log('in');
}).blur(function() {
    console.log('out');
});

focusout不是必需的，因为它是针对子元素的事件冒泡而设计的：http://api.jquery.com/focusout/

15

您可以编写一个小插件，例如：

(function($){
  $.fn.outside = function(ename, cb){
      return this.each(function(){
          var $this = $(this),
              self = this;

          $(document).bind(ename, function tempo(e){
              if(e.target !== self && !$.contains(self, e.target)){
                  cb.apply(self, [e]);
                  if(!self.parentNode) $(document.body).unbind(ename, tempo);
              }
          });
      });
  };
}(jQuery));

..并像这样使用：

$('#title').outside('click', function(e) {
    console.log('outside');
});

例如：http://www.jsfiddle.net/tGnun/

1
非常聪明。也许你可以解释一下内部工作是如何进行的？ - Derek Adair
如何针对使用js / jquery在页面加载后生成的文本框执行相同操作？ - Ruchita Sheth
3

看起来当你点击文本框之外的区域时，focusout() 和 blur() 都会被触发。尝试使用 focus() 代替它们。在这里查看 示例。

OP不想要焦点，他希望代码在离开输入框时触发。 - user113716
1
@patrick，是的，但他说的是它们在输入时都会触发。对我来说，它们在离开时都会触发（正如你所提到的），所以我认为他可能有点混淆了。我的jsfiddle有一个警报，在进入和离开时都会触发，所以我觉得值得发布。 - Aaron Hathaway
0

我不确定这是否是您想要的，但我尝试着给出了一个方案：

<html>
<head>
<title>Example</title>
<script src="jquery-1.4.3.js" type="text/javascript"></script>
</head>
<body id="body">
<script>
    $("document").ready( function() 
    {   $("#body").click( function()
        { alert("body"); } );
        $("#input").click( function(event)
        { alert("input"); event.stopPropagation(); } );
    } );
</script>
<h2>input below</h2>
<input id="input" type="text"/>
</body>
</html>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接