2013-03-05 176 views
3

下面的代碼:onClick函數調用兩次

<label onclick="event.stopPropagation(); alert(event.target.innerHTML);"> 
    <button> 
     button 
    </button> 
    <span> 
     span 
    </span> 
</label> 

(與小提琴:http://jsfiddle.net/YsYKq/1/

如果一個點擊按鈕,只button被警告,但在跨時 - 無論是spanbutton被警告 - 所以onclick函數被調用兩次。

我該如何預防?我只需要調用onclick一次。

+1

'event.preventDefault();'而不是'event.stopPropagation();'似乎只給出單擊的元素。 – Teemu 2013-03-05 09:53:56

回答

5

event.preventDefault();代替event.stopPropagation();觸發onclick僅點擊的元件上。演示jsFiddle

3

請嘗試下面的代碼我正在編輯您的代碼並將「stopPropagation」更改爲「preventDefault」。

<label onclick="event.preventDefault(); alert(event.target.innerHTML);"> 
    <button> 
     button 
    </button> 
    <span> 
     span 
    </span> 
</label> 
0

建議由@BenM那張完美的,但如果你仍然想使用封閉按鈕和跨越然後這裏有一個辦法......

<label for="notExistingId" onclick="event.stopPropagation(); alert(event.target.innerHTML);"> 
<button> 
    button 
</button> 
<span> 
    span 
</span> 

只是「對」的標籤提供的價值帶有不存在的ID。

希望它可以幫助..

0

我已經解決了這個使用不同對於標籤和複選框id字段 - 然後測試event.target.label的標籤腳本

功能selectIconElement(ELEM,事件){

if(event.target.id.indexOf('label')>0){ 
    //do something if its label 
}else{ 
    //do something if not label 
} 

}