So implementieren Sie jQuery, damit das Menü verschwindet, wenn Sie auf „whereother_jquery“ klicken

Das Beispiel in diesem Artikel beschreibt, wie man jQuery implementiert, um das Menü verschwinden zu lassen, wenn man woanders klickt. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

<script type="text/javascript">
  function stopPropagation(e) {
    if (e.stopPropagation) 
      e.stopPropagation();//停止冒泡  非ie
    else 
      e.cancelBubble = true;//停止冒泡 ie
  }
  $(document).bind('click',function(){
    $('#test').css('display','none');
  });
  $('#test').bind('click',function(e){
  //写要执行的内容....吥啦不啦
    stopPropagation(e);//调用停止冒泡方法,阻止document方法的执行
  });
</script>

Die Sache ist so. Wenn ich auf ein Div klicke, wird ein Menü angezeigt. Eine Idee ist, ein Klickereignis an das Dokument zu binden Wenn Sie auf das Dokument klicken, wird das Menü angezeigt. Wenn Sie jedoch auf das Div klicken, ist dies gleichbedeutend mit dem Klicken auf das Dokument. Führen Sie also die auszuführende Anweisung aus Klicken Sie auf das Div-Ereignis und beenden Sie dann das Sprudeln von js. Andernfalls wird das Div-Klickereignis ausgeführt und sprudelt weiter. Gehen Sie zum Dokumentereignis und führen Sie den Klickinhalt des Dokuments aus

Was ich meine, ist, dass div auch zum Dokument gehört. Wenn Sie also auf div klicken, werden beim Klicken auf div auch die Methoden von div und document ausgeführt Der spezifische Inhalt der Einschränkung ist in Klicken Sie auf die div-Methode, um das Sprudeln zu stoppen. Die spezifische Methode besteht darin, e.stopPropagation() → „anwendbar auf Nicht-IE“-Methode zu verwenden, z. B. e.cancelBubble=true

Eine andere Idee besteht darin, zu bestimmen, welche Triggerquelle sich in der Klickmethode des Dokuments befindet. Wenn es sich um ein Div handelt, wird keine Operation ausgeführt, d. h. es wird zurückgegeben. Wenn es sich nicht um ein Div handelt, wird das Menü ausgeblendet wie folgt

Das Ereignisobjekt enthält ein wichtiges Attribut: target(W3C)/srcElement(IE). Dieses Attribut identifiziert das ursprüngliche Element, das das Ereignis ausgelöst hat. Wir können einen Ereignishandler direkt an das Klickereignis des Dokuments binden und im Ereignishandler bestimmen, ob die Ereignisquelle das div-Element mit id==test oder sein Unterelement ist. Wenn ja, führt die Methode return keine aus Wenn nicht, wird das Ereignis ausgeblendet.

$(document).bind('click',function(e){
    var e = e || window.event; //浏览器兼容性
    var elem = e.target || e.srcElement;
    while (elem) { //循环判断至跟节点，防止点击的是div子元素
      if (elem.id && elem.id=='test') {
        return;
      }
      elem = elem.parentNode;
    }
    $('#test').css('display','none'); //点击的不是div或其子元素
});

Leser, die an weiteren jQuery-bezogenen Inhalten interessiert sind, können sich die Spezialthemen auf dieser Website ansehen: „Eine Zusammenfassung der jQuery-Operations-JSON-Datentechniken“, „Eine Zusammenfassung des jQuery-Switching-Specials.“ Effekte und Techniken", " Zusammenfassung der jQuery-Drag-and-Drop-Spezialeffekte und -Techniken", "Zusammenfassung der jQuery-Erweiterungstechniken", "Zusammenfassung gängiger klassischer jQuery Spezialeffekte“, „jQuery-Animation und Spezialeffekte – Nutzungszusammenfassung “, „jQuery-Selektor-Nutzungszusammenfassung “ und „jQuery-allgemeine Plug-ins und Nutzungszusammenfassung "

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.