[英]javascript onclick event not firing on first click
下面的代碼是一個鏈接，單擊該鏈接將打開和關閉最初隱藏的div。 除了必須在第一個實例中兩次單擊鏈接以將其打開之外，它工作還不錯。 這不是主要問題，但是如果可以解決問題，以便div在首次點擊時打開，那就太好了。 謝謝
toggleDiv.js
function toggleDiv(elem, eventType, handler) {
if (elem.addEventListener) {
elem.addEventListener(eventType, handler, false);
} else {
elem.attachEvent('on' + eventType, handler);
}
}
toggleDiv(window, 'load', function() {
var link = document.getElementById('myMagicLink'),
div = document.getElementById('foo');
toggleDiv(link, 'click', function() {
if (!link) return true;
if (div.style.display == "none") {
div.style.display = "block"
} else {
div.style.display = "none"
}
return true;
});
});
index.html
<body>
<a id="myMagicLink" href="http://www.google.com/">My Magic Link</a>
<div id="foo">Opens a div</div>
<br>
End of page
<br>
<script language="JavaScript" type="text/javascript" src="toggleDiv.js"></script>
</body>
切換ASIDE標簽的顯示值時，我遇到了同樣的問題。 從“無”切換到“內聯”並再次返回，在第一次單擊時不起作用。 在我的CSS文件中，顯示設置為“無”。 在我的腳本中，我將“無”更改為“”（據我了解，這似乎意味着“默認”）。 現在，以下代碼對我來說很好用。
var x = document.getElementsByTagName("aside")[0];
if (x.style.display == "")
{
x.style.display = "inline";
}
else
{
x.style.display = "";
}
當我在Firefox開發人員工具中看到CSS /實際值時，我理解了這一點：“ aside”顯示為CSS屬性，但是“ element”首先顯示為沒有屬性。 第一次單擊時，為“元素”分配了設置為“無”的“顯示”屬性。
不知道您遇到了什么麻煩...在Chrome中這對我來說是完美的。
我確實更改了鏈接的URL，以反映回同一文檔，但是div foo會隱藏並重新出現。
幾個樣式注釋：最好將display = ""設置為display = "block" ，這樣它可以返回其默認值。
另外，我還包括了preventDefault函數。 您使用return true將適用於DOM0樣式的事件處理，但不適用於attachEvent/addEventHandler代碼。 這樣可以正確地防止鏈接被跟蹤。
<html>
<head>
<title>Test</title>
<script>
function toggleDiv(elem, eventType, handler) {
if (elem.addEventListener) {
elem.addEventListener(eventType, handler, false);
} else {
elem.attachEvent('on' + eventType, handler);
}
}
toggleDiv(window, 'load', function() {
var link = document.getElementById('myMagicLink'),
div = document.getElementById('foo');
toggleDiv(link, 'click', function(e) {
if (!link) return cancelDefaultAction(e);
if (div.style.display == "none") {
div.style.display = "block"
} else {
div.style.display = "none"
}
return cancelDefaultAction(e);
});
});
function cancelDefaultAction(e) {
var evt = e ? e:window.event;
if (evt.preventDefault) evt.preventDefault();
evt.returnValue = false;
return false;
}
</script>
<body>
<a id="myMagicLink" href="#">My Magic Link</a>
<div id="foo">Opens a div</div>
<br>
End of page
<br>
</body>
</html>
抱歉，除非您有特定的設計，否則某些簡單的操作似乎有點復雜。 但這應該同樣有效：
<html>
<head>
<script language="JavaScript" type="text/javascript">
var toggled = false;
function toggleDiv()
{
if(toggled)
{
document.getElementById('foo').style.display = '';
toggled = false;
}
else
{
document.getElementById('foo').style.display = 'none';
toggled = true;
}
}
</script>
</head>
<body>
<a id="myMagicLink" href="http://www.google.com/" onClick='toggleDiv()'>My Magic Link</a>
<div id="foo">Opens a div</div>
<br>
End of page
<br>
</body>
</html>
“ onClick”事件未觸發JavaScript中的首次按鈕單擊
[英]'onClick' event not firing first time button click in JavaScript
onclick 在第一次點擊時未觸發（僅在純 Javascript 中回答）
[英]onclick not firing on first click (answer only in Plain Javascript)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.