jQuery click olaydan alt öğeyi hariç ben <code><div></code> etiketinde click olayını dışlamak için çalışıyorum

Question

:

burada

<div class="event" style="height:150px;width:150px;border:1px solid #dddddd;padding:10px"> 
    <div class="number">10</div> 
    <div class="wrap"><a style="display:block;color:#FF0000">Event Name</a></div> 
</div> 

javascript: Burada

Benim html

$(document).on('click', '.event', function(e) { 
     if($(e.target).not('.wrap')){ 
      console.log('Hello'); 
     } 
    }); 

Ama bir sebepten dolayı benim için işe yaramıyor. .wrap veya <a> öğelerine tıklandığında tıklama olayının tetiklenmesini istemiyorum. İşte

yanı jsbin edilir: https://jsbin.com/ziyukuyefo/edit?html,js,output

Answer 1

Kodunuzdaki 2 sorunları vardır - Durumunuz hep truthy olacak böylece not() bir jQuery nesnesi döndüren - Eğer anlamlara gelebilir wrape.target bir çapa elemana sahip olduğundan wrap eleman kendisi

Sen atası ağacında seçici eşleşen bir unsur olup olmadığını() görmek için en yakın kullanarak kontrol edebilirsiniz değil

$(document).on('click', '.event', function(e) { 
 
    if (!$(e.target).closest('.wrap').length) { 
 
    snippet.log('clicked'); 
 
    } 
 
});

.wrap { 
 
    background-color: lightgrey; 
 
} 
 
.wrap a { 
 
    border: 1px solid red; 
 
}

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> 
 
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="event" style="height:150px;width:150px;border:1px solid #dddddd;padding:10px"> 
 
    <div class="number">10</div> 
 
    <div class="wrap"><a style="display:block;color:#FF0000">Event Name</a> 
 
    </div> 
 
</div>

---

Diğer bir seçenek