Javascript：單擊包裝元素但不是子元素

Question

我正在寫一些javascript（jQuery），它允許一個div包圍一個復選框，當點擊時，將切換復選框元素。 但是，我遇到的問題是，當你點擊復選框時，它不起作用，因為它被切換兩次（至少我認為這是發生了什么）。

這是一個演示。

這是代碼：

$('.checkbox-wrapper').click(function(){
    var $checkbox = $(this).find('input[type="checkbox"]');
    if ($checkbox.is(':checked')) {
        $checkbox.attr('checked', false);
    } else {
        $checkbox.attr('checked', true);
    }
});

如何才能使其單擊復選框正常工作，但如果單擊周圍區域，它會切換復選框？

解：

感謝jAndy的評論，通過檢查event.target屬性來說明如何做到這一點：

$('.checkbox-wrapper').click(function(e){
    if( e.target.nodeName === 'INPUT' ) {
        e.stopPropagation();
        return;
    }

    var $checkbox = $(this).find('input[type="checkbox"]');
    if ($checkbox.is(':checked')) {
        $checkbox.attr('checked', false);
    } else {
        $checkbox.attr('checked', true);
    }
});

正如其他人所指出的那樣，這可能不是最好的例子，因為你通過使用label標簽而不是div標簽包裝復選框來獲得相同的功能（不需要javascript）。 演示

Answer 1

檢查event.target屬性。

target屬性可以是為事件注冊的元素或其后代。 將event.target與this進行比較通常很有用，以確定是否由於事件冒泡而處理了事件。

Answer 2

試試這個

$('.checkbox-wrapper').click(function(e){
   if(!$(e.target).is(":checkbox")){
     var $checkbox = $(this).find('input[type="checkbox"]');
     if ($checkbox.is(':checked')) {
         $checkbox.attr('checked', false);
     } else {
         $checkbox.attr('checked', true);
     }
   }
});

Answer 3

嘗試在其周圍包裹<label> 。

Answer 4

聽起來你並沒有阻止事件冒泡到父元素

如何在復選框單擊時停止事件冒泡