click事件被解僱兩次 - jQuery的

我有以下簡單的html：click事件被解僱兩次 - jQuery的

<div class="foo" style="width:200px; height:200px;"> 
    <input type="checkbox" /> 
</div> 

<script type="text/javascript"> 
    $('.foo').click(function(){$(this).find('input:checkbox')[0].click();}); 
</script>

點擊200x200的DIV「富」的效果很好，並提出了裏面的複選框，單擊事件。但是，當我完全點擊複選框本身時，它會觸發它的「正常」事件，再加上面的jquery綁定事件，這意味着複選框會自行檢查，然後再次取消選中它自己。

有沒有一種簡潔的方法來防止這種情況發生？

來源

2011-01-10 maxp

它在IE中看起來不錯，而不是在FF中。 – Shoban 2011-01-10 17:48:10

活動泡沫。您需要測試被點擊的e.target。

如果你只是想檢查/取消選中該框，你應該設置其checked屬性。

$('.foo').click(function(e){ 
    if(e.target.tagName.toUpperCase() !== 'INPUT') { 
     var cbox = $(this).find('input:checkbox')[0]; 
     cbox.checked = !cbox.checked; 
    } 
});

編輯：修正了幾個錯誤。

工作演示：http://jsfiddle.net/LhSG9/

來源

2011-01-10 17:49:06 user113716

+1兩者都使用現有選擇器上的鏈接_and_非常簡潔的`bind`的`false`形式。 – Phrogz 2011-01-10 17:53:37

@ Phrogz：謝謝，但我不得不改變這種情況，因爲`false`也會做一個`preventDefault`。：o（ – user113716 2011-01-10 17:54:07

您需要停止點擊複選框，以免冒泡到div。

$('.foo input:checkbox').click(function(e){ 
    // will stop event from "bubbling" 
    e.stopPropagation() 
})

來源

2011-01-10 17:46:38

包括以下功能yiur $(document).ready function -

給出一個ID說，測試你的複選框，然後 -

$('#test').click(function(){ 
return false; 
});

來源

2011-01-10 17:48:08 Alpesh

這是因爲當你點擊你的DIV也可以點擊因爲複選框是裏面的複選框。所以你應該做的是捕獲當用戶點擊div內部但沒有複選框。如果用戶點擊該複選框，將其默認行爲的檢查行動/取消選中

$('.foo:not(':checkbox')').click(function(){ 
    $(this).find('input:checkbox')[0].click(); 
});

來源

2011-01-10 18:00:26 amosrivera

如何：而不是使用一個div，使用<label>。它在語義上更加正確，完全符合你的要求，並且不需要JavaScript。

工作示例：http://jsfiddle.net/LhSG9/1/

來源

2011-01-10 18:45:51 Phrogz

click事件被解僱兩次 - jQuery的

回答

相關問題