Javascript dom元素仅在IE中单击事件触发两次

我遇到了一个问题，即dom元素单击事件在IE9和IE11中触发了两次（我还没有在其他IE版本中测试过）。我使用的是dojo，以及bootstrap css，所讨论的dom元素是引导折叠插件中的一个项。它在Chrome和Firefox中运行良好，但当在IE中查看时，点击一个项目会触发两次点击事件（有时不一致，尤其是在IE9中）。这通常在其他浏览器中触发

检查IE11开发者工具中的元素并单击Events选项卡只会显示一个已注册的单击事件处理程序，因此我真的不确定这个额外事件来自何处。这是IE中的一个bug吗？还是在dojo引导中？有人能解释一下吗？我很确定我可以破解一个解决方案来防止它，但我真的很想知道原因，这样我至少可以在可能的情况下进行适当的修复

我在一个jsfiddle:中重新创建了这个问题，代码如下所示

真正令人困惑的是应用程序中的其他事件。我在示例中添加了一个星号，您可以打开和关闭该事件，该事件可以正常触发，我将以相同的方式向这两个元素添加处理程序。添加此警报是为了使双重事件更为可见，因为它的打开和关闭速度比浏览器渲染任何内容的速度都快，因此在其他情况下看起来好像什么都没有发生

dojoConfig

data-dojo-config='isDebug: 1, async: 1, cacheBust: 0, packages: [ { name: "bootstrap", location: "https://rawgit.com/xsokev/Dojo-Bootstrap/master" }]'

HTML

<div id="theControls" class="panel-group">
    <div class="panel panel-default">
        <div class="panel-heading " role="tab" id="headingOne">
             <h4 class="panel-title">
            <a role="button" class="btn btn-primary" data-toggle="collapse" data-target="#collapse1" 
                data-parent="#theControls">Collapse 1 - list-group</a>
            </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse in">
            <ul id="collapse1-body" class="list-group">
                <li class="itemControl" id="itemControl1-1">
                    <label for="itemControl1-1" class="itemControlLabel">item 1-1</label> 
                    <span title="star me!" class="icon floater-right glyphicon glyphicon-star-empty"></span>
                </li>
                <li class="itemControl" id="itemControl1-2">
                    <label for="itemControl1-2" class="itemControlLabel">item 1-2</label>
                    <span title="star me!" class="icon floater-right glyphicon glyphicon-star-empty"></span>
                </li>
                <li class="itemControl" id="itemControl1-3">
                    <label for="itemControl1-3" class="itemControlLabel">item 1-3</label>
                    <span title="star me!" class="icon floater-right glyphicon glyphicon-star-empty"></span>
                </li>
            </ul>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
             <h4 class="panel-title">
                <a role="button" class="btn btn-primary" data-toggle="collapse" 
                 data-parent="#theControls" data-target="#collapse2">Collapse 2 - panel-body (divs)</a>
              </h4>
        </div>
        <div id="collapse2" class="panel-collapse collapse" role="tabpanel">
            <div class="panel-body">
                <div class="itemControl" id="itemControl2-1">
                    <label for="itemControl2-1" class="itemControlLabel">item 2-1</label>
                    <span title="star me!" class="icon floater-right glyphicon glyphicon-star-empty"></span>
                </div>
                <div class="itemControl" id="itemControl2-2">
                    <label for="itemControl2-2" class="itemControlLabel">item 2-2</label>
                    <span title="star me!" class="icon floater-right glyphicon glyphicon-star-empty"></span>
                </div>
                <div class="itemControl" id="itemControl2-3">
                    <label for="itemControl2-3" class="itemControlLabel">item 2-3</label>
                    <span title="star me!" class="icon floater-right glyphicon glyphicon-star-empty"></span>
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
             <h4 class="panel-title">
                <a role="button" class="btn btn-primary" data-toggle="collapse" 
                 data-parent="#theControls" data-target="#collapse3">Collapse 3 - panel-body (spans)</a>
              </h4>
        </div>
        <div id="collapse3" class="panel-collapse collapse" role="tabpanel">
            <div class="panel-body">
                <span class="itemControl" id="itemControl3-1">
                    <label for="itemControl3-1" class="itemControlLabel">item 3-1</label>
                    <span title="star me!" class="icon floater-right glyphicon glyphicon-star-empty"></span>
                </span>
                <span class="itemControl" id="itemControl3-2">
                    <label for="itemControl3-2" class="itemControlLabel">item 3-2</label>
                    <span title="star me!" class="icon floater-right glyphicon glyphicon-star-empty"></span>
                </span>
                <span class="itemControl" id="itemControl3-3">
                    <label for="itemControl3-3" class="itemControlLabel">item 3-3</label>
                    <span title="star me!" class="icon floater-right glyphicon glyphicon-star-empty"></span>
                </span>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
             <h4 class="panel-title">
                <a role="button" class="btn btn-primary" data-toggle="collapse" 
                 data-parent="#theControls" data-target="#collapse4">Collapse 4 - panel-body (anchors)</a>
              </h4>
        </div>
        <div id="collapse4" class="panel-collapse collapse" role="tabpanel">
            <div class="panel-body">
                <a class="itemControl" id="itemControl4-1">
                    <label for="itemControl4-1" class="itemControlLabel">item 4-1</label>
                    <span title="star me!" class="icon floater-right glyphicon glyphicon-star-empty"></span>
                </a>
                <a class="itemControl" id="itemControl4-2">
                    <label for="itemControl4-2" class="itemControlLabel">item 4-2</label>
                    <span title="star me!" class="icon floater-right glyphicon glyphicon-star-empty"></span>
                </a>
                <a class="itemControl" id="itemControl4-3">
                    <label for="itemControl4-3" class="itemControlLabel">item 4-3</label>
                    <span title="star me!" class="icon floater-right glyphicon glyphicon-star-empty"></span>
                </a>
            </div>
        </div>
    </div>
</div>

CSS

.panel-heading a {
    width: 100%;
}
.floater-right {
    float: right;
}
.itemControl .glyphicon {
    margin: 0.3em 0.1em;
}
.itemControl label {
    padding: 0.2em 0.2em 0 1.5em;
    position: relative;
}
.itemControl.active {
    background: #f3f3f3;
    color: #0076A8;
}
span.itemControl {
    display: block;
}
.itemControl.active label::before {
    content:'';
    position: absolute;
    border-color: #97D700;
    border-style: solid;
    border-width: 0 0.3em 0.25em 0;
    height: 1em;
    top: 0.25em;
    left: 0.6em;
    transform: rotate(45deg);
    width: 0.5em;
}
.itemControl:hover {
    background: #f3f3f3;
    cursor: pointer;
}
#collapse4 a.itemControl{
    display:block;
}

---

.itemControl

项中的标签标签是导致问题的原因。“for”属性将其绑定到其父元素，并似乎触发了另一次单击。尝试并将其切换到另一个内联元素（span或b标记），您的问题将得到解决。使用它没有任何语义，因为它传统上与输入标记一起使用。

您是如何发现或知道的？我想知道，以备将来参考。我认为这与传播有关，只是注意到这只是在你从小提琴上点击标签时发生的。最困难的部分是让IE不要抛出安全警告，并在使用JSFIDLE时停止所有Javascript；）是的，那对我来说也是一件麻烦事D再次感谢！

.panel-heading a {
    width: 100%;
}
.floater-right {
    float: right;
}
.itemControl .glyphicon {
    margin: 0.3em 0.1em;
}
.itemControl label {
    padding: 0.2em 0.2em 0 1.5em;
    position: relative;
}
.itemControl.active {
    background: #f3f3f3;
    color: #0076A8;
}
span.itemControl {
    display: block;
}
.itemControl.active label::before {
    content:'';
    position: absolute;
    border-color: #97D700;
    border-style: solid;
    border-width: 0 0.3em 0.25em 0;
    height: 1em;
    top: 0.25em;
    left: 0.6em;
    transform: rotate(45deg);
    width: 0.5em;
}
.itemControl:hover {
    background: #f3f3f3;
    cursor: pointer;
}
#collapse4 a.itemControl{
    display:block;
}