嵌套元素中的多個事件

Question

我正在嘗試創建一個包含複選框以及其他輸入元素的Web表單，並且我想向用戶提供用於檢查和取消選中框的單擊封裝div時元件。

下面是HTML的例子：

<div class="line"> 
    <input type="checkbox" /> 
    <p>No, I don't want more newsletters</p> 
</div> 

夠簡單。現在，當用戶點擊複選框時，它會被選中/取消選中，事件會冒泡到div.line元素，這可能會改變其背景顏色或其他東西。現在，正如我所說的，我還希望用戶能夠通過單擊div來操縱複選框的值。聽起來很簡單;我們只是添加一個觀察者到div.line元素，捕獲事件並切換複選框的值。那麼，這是問題： 當你點擊複選框時，它的值被切換。但是，由於它駐留在div中，因此您還可以單擊div，觸發其觀察者，然後再次切換複選框值。所以你最終在你開始的地方。發生兩次切換。

我一直在破壞我的大腦，嘗試所有不同的方法。自定義事件，自定義元素標誌...在單個函數運行期間根本沒有辦法知道它是單擊的複選框還是周圍的div元素。但是一定有辦法，我看不到它。

有沒有人有線索？順便說一句，我正在使用Prototype。

Answer 1

使用<label>元件與適當定向for attribute：

<label for="cb"><input type="checkbox" id="cb" /> Click anywhere here</label> 

Demo here。

好處是標記變得語義上令人滿意。請注意，for屬性在技術上是可選的，如果以這種方式封裝目標控件，但IE < 7不支持該屬性（但對於此示例已正常工作）。

Answer 2

您不必將任何事件綁定到內部輸入元素。你只需要將一個事件附加到父div，你應該能夠實現你想做的事情。該行爲基於事件冒泡機制。當你點擊輸入框時，事件會冒泡到外部div（而不是事件捕獲 - 從父級到子級）。

因此，div.line的一個簡單的事件處理程序可以幫你實現。

$('.line').click(function (evt) { 
    console.log("change color here"); 
    $('input[type="checkbox"]').attr('checked','checked'); 
});