Event-Handler von Elementen innerhalb von Etiketten werden auch nach der Verwendung von stopPropagation ausgeführt

Question

Ich habe einige Elemente (wie Eingabe, Absatz, radiobutton jedes Element) innerhalb Etikett eingebettet. Das übergeordnete Element dieses Labels ist das div-Tag. Angewandte Ereignishandler für alle Elemente innerhalb des Etiketts und für das übergeordnete div-Tag außer dem Label-Tag. Angewandte stopPropagation auch in allen Ereignishandlern. Aber wenn ich auf eines der Elemente innerhalb des Etiketts klicke, wird der entsprechende Ereignishandler aufgerufen, und da stopPropagation vorhanden ist, wird der übergeordnete Ereignishandler eingeschränkt, um aufgerufen zu werden. Bis hier ist es in Ordnung. Aber das Problem ist es ist auch die Event-Handler seiner Geschwister aufrufen.

 <div class="scroll-content-item" data-pid="1773">
      <label>   
         <span class="custom">Custom</span>
         <input type="text" class="text custom_width" id="cust_width" value="960"/> 
         <p class="para"> This is test para</p>
      </label>
  </div> 

jQuery-Code

jQuery(document).ready(function($) {

    $('.para').click(function(event) {
        alert("paragraph event ");
        event.stopPropagation();
    });

    $('.custom_width').click(function(event) {

        alert("input custom width event ");
        event.stopPropagation();
    });

    $('.scroll-content-item').click(function(event) {
        alert("parent div event ");
        event.stopPropagation();
    });

});

Wenn ich auf einen Absatz klicke, werden dessen Event-Handler und der Handler des Eingabetyps ebenfalls aufgerufen. Wenn ich auf span mit Klasse benutzerdefinierte klicken, da es nicht über Event-Handler, übergeordnete wird immer zuerst aufgerufen und später Eingabe-Typ-Handler wird immer aufgerufen.

Die Frage, die Sie sich vielleicht stellen, ist, was der Zweck der Einbettung von p, input und all jenen innerhalb des Labels ist. Wir verwenden benutzerdefinierte input type="file" wir überlagern die Etikettendaten mit der Eingabedatei, aber onclick für den Etikettentyp Datei muss ausgelöst werden. Zu diesem Zweck bette ich Elemente in das Etikett ein

Ich möchte nur wissen, warum die beiden Ereignis-Handler aufgerufen werden, obwohl ich mit stopPropagation .

Als Referenz habe ich jsfiddle erstellt: http://jsfiddle.net/x7xQg/29/

Vielen Dank im Voraus

Answer 1

Hinzufügen einer return false; zu Ihrem Event-Handler löst das Problem.

Auch hinzufügen event.preventDefault(); um alle Browser abzudecken.

http://jsfiddle.net/x7xQg/30/