nicht zulassen Kind Elemente

Question

Ich habe Elemente wie diese

<div class="parent-component"> 
    <div class="form-group"> 
     <label for="my-input">Label</label> 
     <input type="text" name="my-input" id="my-input" class="form-control"> 
    </div> 
</div> 

angeklickt werden ich einen Klick Zuhörer mit jQuery on Methode an die Mutter angeschlossen haben als

$(document).on("click", ".parent-component", function() { 
    // ... 
}) 

folgt Wo immer ich auf Innerhalb der .parent-component wird der Ereignis-Listener ausgelöst. Durch Klicken auf die Eingabe - oder ein beliebiges interaktives Element (Links, Schaltflächen, Eingaben) - wird es jedoch aktiv.

Wie kann ich verhindern, dass ein Element innerhalb von .parent-component angeklickt wird, so dass ich Eingänge und Links darin haben kann, die nicht angeklickt werden können?

Answer 1

pointer-events geht Kredit @Tibos

$(document).on("click", ".parent-component", function(e) { 
 
    console.log('click on: ' + e.target.className); 
 
});

.no-click { 
 
    pointer-events: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent-component"> 
 
    <div class="form-group no-click"> 
 
     <label for="my-input" style="pointer-events: none" >Label</label> 
 
     <input type="text" name="my-input" id="my-input" class="form-control" /> 
 
     <span>This still sends clicks to parent</span> 
 
    </div> 
 
</div>

Answer 2

Dies ist normalerweise wünschenswert Verhalten; Ein Klick auf ein Kindelement ist auch ein Klick auf die Eltern- und Vorfahrenelemente, genauso wie Sie nicht in Ihrem Badezimmer sein können, ohne auch in Ihrem Haus zu sein.

Wenn Sie gegen Kinder/Nachkomme Klicks schützen möchten, können Sie jedoch Folgendes tun:

$(document).on("click", ".parent-component", function(evt) { 
    if (!$(evt.target).is('.parent-component')) return false; 
    //beyond here, we can be sure the element was to the parent directly, 
    //not any children/descendants 
}) 

Answer 3

Eine andere Alternative, so dass Sie an verschiedenen Orten nutzen können, ..

Ist für die Sie möchten eine Klasse erstellen und auf diese zielen und sie auffordern, die Ereignisse nicht weiterzugeben.

Der Vorteil war, wenn Sie einige Steuerelemente haben, die Sie die Ereignisse weitergeben möchten Sie können die Klasse verlassen.

zB ..

$(document).on("click", ".parent-component", function(e) { 
 
    console.log('click'); 
 
}); 
 

 
$(document).on('click', '.no-propagate', function (e) { e.stopPropagation(); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent-component"> 
 
    <div class="form-group"> 
 
     <label class="no-propagate" for="my-input">Label</label> 
 
     <input class="no-propagate" type="text" name="my-input" id="my-input" class="form-control"> 
 
     <span>This still sends clicks to parent</span> 
 
    </div> 
 
</div>

Answer 4

Sie prüfen, ob das Zielobjekt, die angeklickt wurde, eine gewisse Klasse hat, und nur dann, fortzusetzen.

$(document).on("click", '.someClass', function(e){ 
    if(e.target.classList.contains('someClass')) return false; 
}) 

Answer 5

Sie können dies auf verschiedene Weise

Dies ist nur ein Beispiel für Sie untergeordnetes Element ausschließen (s) von Eltern.

$(document).ready(function(){ 
 
    $(document).on('click', '.main', function(e){ 
 
    alert('Parent was clicked'); 
 
    }).find('.child').on('click', function(){ 
 
    
 
    return false; 
 
    }); 
 

 
});

.main{ 
 
    background: orangered; 
 
    color: white; 
 
    font-weight: bold; 
 
    padding: 10px; 
 
    height: 400px; 
 
    width: 400px; 
 
    padding: 10px; 
 
} 
 

 
.child{ 
 
    background: green; 
 
    color: white; 
 
    margin: auto; 
 
    height: 40%; 
 
    width: 40%; 
 
    padding: 10px; 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class='main'> 
 
    Click me and I will fire up something 
 
    <div class='child'> 
 
    If you click on me I will not fire..... 
 
    I am the child you cannot click me 
 
    </div> 
 
    
 
    </div>

Ein anderer Weg

$(document).ready(function(){ 
 
    $(".main").click(function(){ 
 
    alert('Parent was clicked'); 
 
    }).children().click(function(){ 
 
    
 
    return false; 
 
    }); 
 

 
});

.main{ 
 
    background: orangered; 
 
    color: white; 
 
    font-weight: bold; 
 
    padding: 10px; 
 
    height: 400px; 
 
    width: 400px; 
 
} 
 

 
.child{ 
 
    background: green; 
 
    color: white; 
 
    margin: auto; 
 
    height: 40%; 
 
    width: 40%; 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='main'> 
 
    Click me and I will fire up something 
 
    <div class='child'> 
 
    If you click on me I will not fire..... 
 
    This is the child you cannot click me 
 
    </div> 
 
    
 
    </div>