如果点击/聚焦div，则不应触发jQuery模糊
我有一个标准的文本输入，有一个模糊事件。 当单击文档中的任何内容时（除了输入AND
）之外，模糊事件应该触发。
我的问题是我不知道如何添加
来否定模糊事件function。
希望我能够很好地解释自己，我知道这有点奇怪。 如果您需要更多信息，请告诉我。
使用事件目标确定单击的内容。 以下将跟踪文档的所有点击，如果元素是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设置的元素。
更新：必须完全重写我的解决方案。 blur事件处理程序附加到失去焦点的事件：如果它与mouseout事件类似，我们可以知道哪个元素将获得焦点，但是没有这样的运气。 所以我们必须采用捕获.click事件 – 并根据它触发一些function，而不是监听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(); });
这是一个小提琴 。 对不起由我的原始答案引起的混乱。 （
其他解决方案中缺少一些东西。 最重要的是，您需要在调用模糊事件之前检查输入是否已被聚焦。 另一件事是，不仅在你点击其他地方时调用模糊事件：你也可以在浏览器中转到另一个标签时调用它，或者如果你点击tab或shift + tab转到下一个/上一个输入。 最后，当您检查目标元素是否是模糊事件的exception（它可能是您的exception的子代）时，您需要考虑使用jQuery函数nearest（ ）。
所以，我想出了这个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; }
? option 1 option 2
可以尝试添加一些逻辑吗？
$('input').blur(function(e){ var tester = e.target; if ($(tester).attr('id') == 'show-anyways'){ return false; } else { // do something? } });
这基本上会在模糊发生时触发，它会检查点击/标记的内容以及是否恰好是show-anyways然后它将返回false并停止做任何事情。 但如果它不显示 – 无论如何它可以做你的模糊事件？
未经测试，但这是你的意思吗？