Heim > Web-Frontend > js-Tutorial > Klicken Sie in jQuery auf eine beliebige Stelle, um die DIV-Funktionalität auszublenden

Klicken Sie in jQuery auf eine beliebige Stelle, um die DIV-Funktionalität auszublenden

小云云
Freigeben: 2018-01-19 13:22:14
Original
1950 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich relevante Informationen zum Klicken auf eine beliebige Stelle mit Ausnahme des angegebenen Bereichs vorgestellt. Der Code ist einfach und leicht zu verstehen, sehr gut und hat hoffentlich Referenzwert es kann jedem helfen.

Der spezifische Code lautet wie folgt:


$('body').click(function(e) {
  var target = $(e.target);
  // 如果#overlay或者#btn下面还有子元素,可使用
  // !target.is('#btn *') && !target.is('#overlay *')
  if(!target.is('#btn') && !target.is('#overlay')) {
    if ( $('#overlay').is(':visible') ) { 
      $('#overlay').hide();                          
    }
  }
});
Nach dem Login kopieren

oder


$('body').click(function(e) {
  if(e.target.id != 'btn' && e.target.id != 'overlay')
   if ( $('#overlay').is(':visible') ) {
     $('#overlay').hide();
   }
})
Nach dem Login kopieren

PS: Werfen wir einen Blick auf einen Teil des JQuery-Codes unten. Klicken Sie auf eine andere Stelle als sich selbst, um ihn auszublenden


$("#test").click(function(e) { 
  e?e.stopPropagation():event.cancelBubble = true; 
}); 
$(document).click(function() { 
  $("#test").fadeOut(); 
<pre name="code" class="html">e?e.stopPropagation():event.cancelBubble = true;  为阻止冒泡事件
});
 

Nach dem Login kopieren

Verwandte Empfehlungen:

jQuery klickt auf eine beliebige Stelle außer dem angegebenen Bereich, um die DIV-Funktion auszublenden

js verbirgt den Inhalt zwischen Divs nach Klassennamen

Verwenden Sie CSS3, um Beispiel-Tutorial von div anzuzeigen und auszublenden

Das obige ist der detaillierte Inhalt vonKlicken Sie in jQuery auf eine beliebige Stelle, um die DIV-Funktionalität auszublenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage