带有 'label' 标记的 HTA 应用程序中的奇怪行为

Weird behaviour in HTA application with 'label' tag

所以,这是我的代码

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title>Test</title>
<script type="text/vbscript">
Function obtn1()
    document.forms("form").btn1.style.display = "none"
    document.forms("form").btn2.style.display = "block"
    msgbox "btn1"
End Function

Function obtn2()
    document.forms("form").btn1.style.display = "block"
    document.forms("form").btn2.style.display = "none"
    msgbox "btn2"
End Function
</script>
</head>
<body>
<form id="form">
    <label>
        <input type="button" value="btn1" onclick="obtn1()" name="btn1" style="display: block;" />
        <input type="button" value="btn2" onclick="obtn2()" name="btn2" style="display: none;" />
    </label>
</form>
</body>
</html>

它的功能很简单:显示第一个按钮。单击此按钮时,显示第二个按钮并隐藏第一个按钮。单击第二个按钮时,显示第一个按钮并隐藏第二个按钮。

但我无法让它发挥作用。但是,如果我删除 <label> 元素或设置属性 for="somethinghere" 那么代码就可以正常工作。

所以有人能告诉我我做错了什么吗?我 运行 在 Windows 7 x86 上安装了 Internet Explorer 10。

只需将您的 input 标签放在不同的 label 标签中,如下所示:

<form id="form">
    <label>
        <input type="button" value="btn1" onclick="obtn1()" name="btn1" style="display: block;" />
    </label>    
    <label>
        <input type="button" value="btn2" onclick="obtn2()" name="btn2" style="display: none;" />
    </label>
</form>

正如上面R Lam所说,因为label标签没有指定的表单元素绑定到(for属性) ,当用户点击它时,它会触发里面的两个input[type="button"]