Fatal编程技术网
  • javascript/
  • javascript onclick事件在第一次单击时未触发

javascript onclick事件在第一次单击时未触发

javascript

javascript onclick事件在第一次单击时未触发,javascript,javascript-events,getelementbyid,addeventlistener,onclicklistener,Javascript,Javascript Events,Getelementbyid,Addeventlistener,Onclicklistener,下面的代码是一个链接，单击该链接将打开和关闭一个最初隐藏的div。它可以正常工作，而不必在第一次单击链接两次来打开它。这不是一个大问题，但如果可以使div在第一次单击时打开，那就太好了。谢谢 toggleDiv.js function toggleDiv(elem, eventType, handler) { if (elem.addEventListener) { elem.addEventListener(eventType, handler, false);

下面的代码是一个链接，单击该链接将打开和关闭一个最初隐藏的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>


开一个div


页尾
不确定您遇到了什么麻烦。。。这在Chrome中对我来说完美无瑕

我确实更改了链接的url以反映回同一文档，但是div
foo
正在隐藏并重新显示

两个样式注释：与其设置
display=“block”
，不如说
display=“”
，这样它就可以返回到默认值

此外，我还包括一个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>


试验
函数toggleDiv（元素、事件类型、处理程序）{
if（元素addEventListener）{
元素addEventListener（事件类型，处理程序，false）；
}否则{
元素attachEvent（'on'+事件类型，处理程序）；
}
}
toggleDiv（窗口“加载”，函数（）{
var link=document.getElementById（'myMagicLink'），
div=document.getElementById（'foo'）；
切换DIV（链接“单击”功能（e）{
如果（！link）返回cancelDefaultAction（e）；
如果（div.style.display==“无”）{
div.style.display=“块”
}否则{
div.style.display=“无”
}       
返回取消默认操作（e）；
});
});
函数cancelDefaultAction（e）{
var evt=e？e:window.event；
if（evt.preventDefault）evt.preventDefault（）；
evt.returnValue=false；
返回false；
}   
开一个div


页尾
很抱歉，对于一些非常简单的东西来说，这似乎有点复杂，除非你有一个特定的设计；但这应该同样有效：


var-toggled=false；
函数toggleDiv（）
{
如果（已切换）
{
document.getElementById（'foo'）.style.display=''；
切换=假；
}       
其他的
{
document.getElementById（'foo'）.style.display='none'；
切换为true；
}
}
开一个div


页尾
​

我在切换备用标记的显示值时遇到了相同的问题。在第一次单击时，从“无”切换到“内联”再切换回来将不起作用。在我的CSS文件中显示设置为“无”。 在我的脚本中，我将“none”改为“”（据我所知，这似乎意味着“default”）。下面的代码现在对我来说很好

    var x = document.getElementsByTagName("aside")[0];
if (x.style.display == "")
{
    x.style.display = "inline"; 
}
else
{
    x.style.display = "";   
}
当我在Firefox开发者工具中看到CSS/实际值时，我理解了这一点：“aside”显示为CSS属性，但“element”首先显示为不带属性。第一次单击时，“元素”被分配了一个设置为“无”的“显示”属性。

您正在测试哪个浏览器？同样，我没有看到任何代码“最初隐藏”上述div。@LOSTCODER Chrome这是一个使用manifest v2的弹出式扩展，因此没有内联Javascript这并不是导致它出错的原因，但是如果
toggleDiv（）
被称为
addEventHandler（）之类的话，您的代码将更容易理解（和维护）
@jeremy我用你的代码替换了它，但在div打开之前，仍然需要先单击链接两次。如果有帮助，这是一个弹出的Chrome扩展。div开始打开。第一次单击将隐藏它，第二次单击将再次打开它。如果这是您的预期目标，您可能需要执行一个
来将其隐藏起来。谢谢，但这是一个chrome扩展，因此内联javascript无法工作 
    var x = document.getElementsByTagName("aside")[0];
if (x.style.display == "")
{
    x.style.display = "inline"; 
}
else
{
    x.style.display = "";   
}