jquery - 如果单击/聚焦 div，jQuery 模糊不应触发

Question

我有一个具有模糊事件的标准文本输入。当单击文档中的任何内容（输入 AND 除外）时，应触发 blur 事件<div id='show-anyways'></div>。

我的问题是我不知道如何添加<div id='show-anyways'></div>来否定模糊事件功能。

希望我已经很好地解释了自己，我知道这有点奇怪。如果您需要更多信息，请告诉我。

Answer 1

使用事件目标来确定点击了什么。如果元素是 DIV 或输入，以下将跟踪对文档的所有点击，并且不会触发 blur()。

var $input=$( '#MY-Input-ID');

$(document).click(function(evt){
   var $tgt=$(evt.target);
   if( !$tgt.is( '#show-anyways') && !$tgt.is($input) ){
         $input.blur()
    }
})

它不会在设置了任何 preventPropogation 的元素上触发。

Answer 2

更新：必须完全重写我的解决方案。事件处理程序附加到失去焦点的blur事件：如果它类似于mouseout事件，我们可以知道哪个元素将获得焦点，但没有这样的运气。所以我们不得不求助于捕获.click事件——并基于它触发一些函数，而不是监听blur事件。

var inputIsBlurred = function() { 
   console.log('Run away!!!');
};
$(document).click(function(e){
  var $target = $(e.target);
  console.log($target);
  if ($target.is('#some_input') // fired by an input - no special effects
      || $target.is('#show-anyways') // fired by 'show-anyways' div
      || $target.parents('#show-anyways').length > 0 // ... or its children
  ) {
      return true; // move along, nothing to do here
  }
  inputIsBlurred();
});​

这是一个可以玩的小提琴。很抱歉我的原始答案造成的混乱。(

Answer 3

其他解决方案缺少一些东西。最重要的是，您需要在调用模糊事件之前检查输入是否聚焦。另一件事是，不仅在您单击其他位置时会调用模糊事件：您还可以在您转到浏览器中的另一个选项卡或点击tab或shift + tab转到下一个/上一个输入时调用它。最后，当您检查目标元素是否是您的模糊事件的异常（它可以是您的异常的子元素）时，您需要考虑使用 jQuery 函数最接近（ ）。

所以，我想出了这个 jQuery 原型函数：

$.fn.extend({

    blurIfNot : function(options, handler)
    {
        var defaults =
        {
            except : [],
            maxParent : null // A DOM element within which
                             // a matching element may be found
        };
        var opt = $.extend({}, defaults, options);
        var time = new Date().getTime();
        
        this.each(function()
        {
            var thisInp = $(this);
            thisInp[0].blurIfNot = {};
            time += 1000000000000;
            
            var except = opt.except;
            
            if ($.isFunction(opt.except))
            { except = opt.except.call(thisInp[0]); }
            
            function fire_blur_event(_tar, evt, mousedown)
            {
                var proceed = true;
                
                for (var i in except)
                {
                    if (_tar.is(thisInp) ||
                    _tar.closest(except[i], opt.maxParent).length)
                    {
                        proceed = false;
                        break;
                    }
                }
                if (proceed)
                {
                    thisInp[0].blurIfNot.focus = false;
                    handler.call(thisInp[0], evt);
                }
                else if (mousedown)
                {
                    $('html').one('mouseup', function(e)
                    {
                        thisInp[0].focus();
                    });
                }
            }
            
            if (!thisInp[0].blurIfNot.isset)
            {
                $('html').mousedown(function(e)
                {
                    if (thisInp[0].blurIfNot.focus)
                    {
                        var tar = $(e.target);
                        
                        if (!tar.is('input'))
                        { fire_blur_event(tar, e, true); }
                    }
                });
                
                $(window).blur(function(e)
                {
                    if (thisInp[0].blurIfNot.focus)
                    {
                        thisInp[0].blurIfNot.focus = false;
                        handler.call(thisInp[0], e);
                    }
                });
            }
            else
            {   // to be able to update the input event if you have
                // created new inputs dynamically
                $('input').off('focus.blufIfNot' + time);
            }
            
            $('input').on('focus.blurIfNot' + time, function(e)
            {
                var tar = $(e.target);
                
                if (tar[0] == thisInp[0])
                { thisInp[0].blurIfNot.focus = true; }
                
                else if (thisInp[0].blurIfNot.focus)
                { fire_blur_event(tar, e); }
            });
            
            thisInp[0].blurIfNot.isset = true;
        });
        return this;
    }
});

$('#input_blur_if_not').blurIfNot(
{
    except : [
        $('.autocomplete'), $('.question')
    ],
    // You can also define the elements with a function:
    // except : function()
    // {
    //     return [ $(this).parent().find('.autocomplete') ];
    // },
    maxParent : $('#parent')[0] // optional
},
function(e)
{
    var rand = Math.random();
    
    $('#test').css('padding', rand * 100 + "px").
    html(rand + " blur !");
});

.autocomplete {
    background: #eee;
}
.autocomplete, input {
    width: 200px;
    padding: 3px;
    border: 1px solid #555;
}
.question {
    display:inline-block;
    border-radius:50%;
    background:#137dba;
    color:#fff;
    font-weight:bold;
    padding:2px 7px;
    cursor:pointer;
}
#test {
    position:absolute;
    top:0;
    left:260px;
    color:red;
    font-weight:bold;
    padding:10px 0;
    vertical-align:bottom;
}

<script src="http://code.jquery.com/jquery-latest.js"></script>

<div id="parent">
    
    <input value="an input" />
    <br><br>
    <input id="input_blur_if_not" value="input with autocomplete menu" />
    
    <div class="question">?</div>
    <div class="autocomplete">
        <div>option 1</div>
        <div>option 2</div>
    </div>
    <br>
    <input value="another input" />
    <div id="test"></div>
  
</div>

在 Chrome 和 IE11 中测试。如果您需要更多解释，请随时发表评论。

Answer 4

可以尝试添加一些逻辑吗？

$('input').blur(function(e){
var tester = e.target;
if ($(tester).attr('id') == 'show-anyways'){
return false;
}
else {
// do something?
}

});

这基本上在发生模糊时触发，它检查点击/定位的内容，如果它恰好是显示，那么它将返回 false 并停止做任何事情。但如果它不显示，那么它可以做你的模糊事件吗？

未经测试，但这是你的意思吗？