Javascript onclick事件在IE中触发两次，但在FF或Chrome中不触发_Javascript_Html_Internet Explorer

Javascript onclick事件在IE中触发两次，但在FF或Chrome中不触发

javascript html internet-explorer

Javascript onclick事件在IE中触发两次，但在FF或Chrome中不触发,javascript,html,internet-explorer,Javascript,Html,Internet Explorer,我在一个div上有一个onclick事件，它包装了一个标签和一个span。在IE中，如果单击标签，事件将触发两次，如果单击范围，事件将触发一次。这在其他浏览器中不会发生。下面是一个示例代码： <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t

我在一个div上有一个onclick事件，它包装了一个标签和一个span。在IE中，如果单击标签，事件将触发两次，如果单击范围，事件将触发一次。这在其他浏览器中不会发生。下面是一个示例代码：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <script type="application/javascript">
        function showHide(id) {
        var node = document.getElementById(id);
        if (node.style.display != "none")
            node.style.display = 'none';
        else
            node.style.display = 'block';
        }
    </script>
</head>
<body>
    <div onclick="showHide('expandDiv')">
        <label id="outLabel" for="outText">Label</label>
        <span id="outText">This is an example of an</span>
    </div>
    <div id="expandDiv" style="display:block">
        <p>Expanded Div</p>
    </div>
</body>
</html>


函数showHide（id）{
var节点=document.getElementById（id）；
如果（node.style.display！=“无”）
node.style.display='none'；
其他的
node.style.display='block'；
}
标签
这是一个例子
扩展分区

添加

事件.preventDefault（）在IE和Chrome中正常工作
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <script type="application/javascript">
        function showHide(id) {
        event.preventDefault();
        var node = document.getElementById(id);
        if (node.style.display != "none"){
            node.style.display = 'none';
        }else{
            node.style.display = 'block';
            }
        }
    </script>
</head>
<body>
    <div onclick="showHide('expandDiv')">
        <label id="outLabel" for="outText">Label</label>
        <span id="outText">This is an example of an</span>
    </div>
    <div id="expandDiv" style="display:block">
        <p>Expanded Div</p>
    </div>
</body>
</html>


函数showHide（id）{
event.preventDefault（）；
var节点=document.getElementById（id）；
如果（node.style.display！=“无”）{
node.style.display='none'；
}否则{
node.style.display='block'；
}
}
标签
这是一个例子
扩展分区
这里有一个略短的版本
HTML
<div onclick="showHide('expandDiv', event)">

演示
试着把你的情况放在一个没有解决问题的大括号里。为什么你有一个跨度标签？这只是我从我的项目中删掉的一个例子。我只是去掉了我认为回答这个问题不必要的所有内容。你不需要先定义事件吗？除非你正确定义事件，否则它在Firefox中不会工作。放置event.preventDefault（）；在函数的开头不起作用，但将它放在末尾起作用。@John-它应该在函数中的任何位置起作用（显然，在未执行的条件块中除外）。如果一开始它不工作，那么函数中肯定还有其他问题。（但根据前面的注释，如果您希望它在所有浏览器中都能工作，则需要定义事件）。@nnnnnn True，当我将事件作为参数传入时，它确实能工作。我还发现，您可以不将事件作为参数传入而执行此操作。IE中发生的事情是当它到达event.preventDefault（）时；它将影响全局window.event变量，防止其再次触发。这不会影响其他浏览器，因为如果您想修改事件，它们需要将事件作为参数传入。仍然不能很好地解释为什么标签会受到影响，但不能解释范围。。。
function showHide(id, event) {
  var node         = document.getElementById(id),
      curr_display = node.style.display;

  node.style.display = curr_display === "block" ? "none" : "block";   
  event.preventDefault();
}