2017-04-20 185 views
7

我有點困惑。JavaScript函數運行兩次?

我有一個複選框,用戶可以點擊確定我的網頁上的私人電話號碼是否對所有或只有管理員可見。當單擊該框時,我想確保允許您首先打印它的狀態,僅用於測試目的。當我運行這個函數時,它運行兩次。

我在別的地方讀過這是因爲回調?但我返回False所以這不應該是這樣嗎?

我不是JavaScript嚮導,所以有很多東西我仍然不知道JavaScript及其與ASP的交互。

/** 
* Used to Check whether a Private Phone number should be hidden or shown. 
*/ 
function ValidateHidePrivate() { 
    if (scope["pickeduser"] != scope["credential"]) { 
     alert("Not allowed"); 
     return false; 
    } else { 
     alert(document.getElementById("HidePrivate").checked); 
     return false; 
    } 
} 

和HTML:

<label for="HidePrivate" onclick="ValidateHidePrivate()"> 
    <input type="checkbox" name="HidePrivate" id="HidePrivate" value="no" /> 
    Hide my Private Phone Number 
</label> 

任何幫助嗎?

+1

複選框與標籤? – Tushar

+1

@Tushar我意外地發佈了這個問題太早。是的,這是一個標籤。剛剛添加了該部分。 – OmniOwl

回答

6

這是因爲帶有for屬性的引發與點擊關聯的<input type="checkbox">元素的click事件。

您應該將click事件處理程序綁定到input而不是label

function ValidateHidePrivate() { 
 
     alert(); 
 
}
<label for="HidePrivate" > 
 
    <input type="checkbox" name="HidePrivate" onclick="ValidateHidePrivate()" id="HidePrivate" value="no" /> 
 
    Hide my Private Phone Number 
 
</label>

+1

這是正確的解決方案。謝謝! – OmniOwl

2

當您點擊您的標籤時,是否有事件點擊也在複選框上運行? 嘗試在您的功能中添加event.stopPropagation()

+0

即使在添加後仍然運行兩次。 – OmniOwl

1

只在input中添加onclick事件處理程序。 input也嵌套在標籤內。

希望這個片段將是有益的

HTML

<input type="checkbox" name="HidePrivate" id="HidePrivate" value="no" onclick="ValidateHidePrivate()" /> 

<label for="HidePrivate"> 
    Hide my Private Phone Number 
</label> 

JS

function ValidateHidePrivate() { 
    // rest of code 
} 

DEMO

+0

這樣做會破壞我的佈局:http://puu.sh/vqb2a/b973a5d057.png – OmniOwl