Отключить галочку на DIV нажмите

Question

У меня есть простой контейнер div с отформатированным <ul><li> внутри для отображения контактной информации. Когда вы нажмете на div, он отобразит ваш профиль на странице. Это работает нормально.

Однако есть ли способ сделать это так, чтобы checkbox по-прежнему доступен для просмотра? На данный момент, если вы нажмете checkbox, он действует так, как будто я нажал на родительский div, поэтому он перенаправит вас на страницу. Таким образом, я хотел бы, чтобы работать, как это, но с возможностью еще быть в состоянии нажать на checkbox

У меня есть следующий макет, CodePen

HTML

<div class="contactlist" data-token="ABCDEF"> 
    <ul> 
     <li><input type="checkbox"></li> 
     <li><img src="" alt="..." height="50" width="50" /></li> 
     <li><span>Mr A Sample</span></li> 
    </ul> 
</div> 

JS

$(".contactlist").on("click", function(e){ 

    var token = $(this).data('token'); 
    window.location.href = "contact.php?token="+token; 

}); 

П.С. window.location не работает в примере CodePen (они Отключива страница переадресует), но обычно работает s, и перенаправит вас.

Answer 1

объект объект имеет свойство target, которое имеет ссылку на элемент возникновения события (на котором фактически был нажат элемент). Так что, если инициирующий элемент является флажок, то вы можете пропустить оставшуюся часть логики событий, например, так:

// did not click on a checkbox 
if(!$(e.target).is(':checkbox')) 

Полный JS

$('.contactlist').on('click', function(e) { 
    if(!$(e.target).is(':checkbox')) { 
     var token = $(this).data('token'); 
     window.location.href = 'contact.php?token=' + token; 
    } 
});