Verhindern, dass der click-event-Handler der übergeordneten div ausgelöst wird, wenn auf das untergeordnete Element geklickt wird

Question

Höchstwahrscheinlich ist dieses Problem gut dokumentiert, aber ich konnte keine einfache Antwort finden.

Ich habe Click-Event-Handler für ein div und ein Kind-Element eingebettet. Wenn ich auf den eingebetteten Elementhandler klicke (ein Symbol im Beispiel unten), sind sowohl das Symbol als auch die untergeordneten div-Handler Auslöser. Während das gewünschte Verhalten wäre, nur Icon-Click-Event-Handler auszulösen.

Was wäre eine Best-Practice-Umgehung dieses Problems? Danke im Voraus!

$(function(){ 
 
    $('#test_button').on('click', function() { 
 
     alert('Button'); 
 
    }); 
 
     
 
    $('#test_div').on('click', function() { 
 
     alert('Div'); 
 
    }); 
 
});

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id= 'test_div'> 
 
    <i id = "test_button" class="fa fa-times" aria-hidden="true"></i> 
 
</div>

Answer 1

können Sie verwenden, um die stopPropagation Funktion, dies zu tun:

$(function(){ 
 
\t $('#test_button').on('click', function (e) { 
 
\t  e.stopPropagation(); 
 
\t  alert('Button'); 
 
    }); 
 
     
 
    $('#test_div').on('click', function() { 
 
\t  alert('Div'); 
 
    }); 
 
});

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id= 'test_div'> 
 
    <i id = "test_button" class="fa fa-times" aria-hidden="true"></i> 
 
</div>

Beachten Sie, dass die event zum f passieren müssen (die e Variable in meinem Beispiel).