यदि jQuery क्लिक किया गया है/केंद्रित

Question

मेरे पास एक मानक टेक्स्ट इनपुट है जिसमें ब्लर इवेंट है तो jQuery ब्लर को आग नहीं लगनी चाहिए। जब दस्तावेज़ में कुछ भी क्लिक किया जाता है तो धुंधला घटना आग लगनी चाहिए (इनपुट और <div id='show-anyways'></div> के अलावा)।

मेरी समस्या यह है कि मुझे नहीं पता कि ब्लर इवेंट फ़ंक्शन को अस्वीकार करने के लिए <div id='show-anyways'></div> को कैसे जोड़ना है।

उम्मीद है कि मैंने खुद को काफी समझाया है, मुझे पता है कि यह एक अजीब स्थिति है। अगर आपको अधिक जानकारी चाहिए तो कृपया मुझे बताएं।

Answer 1

निर्धारित करने के लिए क्या क्लिक किया जाता है घटना लक्ष्य का प्रयोग करें। बाद दस्तावेज़ के सभी क्लिक ट्रैक करेगा और कलंक() करता है, तो तत्व DIV या इनपुट है ट्रिगर नहीं।

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

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

यह तत्वों पर ट्रिगर नहीं करेगा जिनके पास कोई रोकथाम है।

Answer 2

कुछ तर्क जोड़ने की कोशिश कर सकते हैं?

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

}); 

इस मूल रूप से आग जब कलंक होता है, यह जाँच करता है कि क्या क्लिक किया गया था/targed और अगर यह होता है शो-वैसे तो यह गलत लौट सकते हैं और कुछ भी करने से बंद हो जाएगा। लेकिन अगर यह नहीं दिखाता है-वैसे भी तो यह आपकी धुंधली घटना कर सकता है?

अनचाहे, लेकिन क्या इसका मतलब यह है?

Answer 3

अद्यतन: पूरी तरह से मेरे समाधान को फिर से लिखना पड़ा। 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(); 
});​ 

यहां खेलने के लिए a fiddle है। मेरे मूल उत्तर के कारण उस भ्रम के लिए खेद है। (

Answer 4

अन्य समाधानों से कुछ चीजें गायब हैं। सबसे महत्वपूर्ण बात यह है कि आपको यह जांचने की आवश्यकता है कि इनपुट आपके ब्लर इवेंट को कॉल करने से पहले केंद्रित है या नहीं। दूसरी बात यह है कि एक धुंधला घटना केवल तभी कहा जाता है जब आप कहीं और क्लिक करते हैं: जब आप अपने ब्राउज़र में किसी अन्य टैब पर जाते हैं या आपहिट करते हैं तो आप इसे कॉल भी कर सकते हैं अगले/पिछले इनपुट पर जाने के लिएया shift + tab। अंत में, आपको jQuery फ़ंक्शन closest() का उपयोग करने पर विचार करने की आवश्यकता है जब आप यह जांचते हैं कि लक्ष्य तत्व आपके धुंधले ईवेंट का अपवाद है (यह आपके अपवाद का बच्चा हो सकता है)।

तो, मैं इस 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>

क्रोम और IE11 में परीक्षण किया गया। अगर आपको अधिक स्पष्टीकरण की आवश्यकता है तो टिप्पणी करने के लिए स्वतंत्र महसूस करें।