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

Question

我遇到了 dom 元素点击事件在 IE 9 和 IE 11 中触发两次的问题（我没有在其他 IE 版本中测试过）。我正在使用 dojo、dojo-bootstrap 和 boostrap css 并且有问题的 dom 元素是bootstrap 折叠插件中的一个项目。它在 Chrome 和 Firefox 中工作正常，但在 IE 中查看时，单击一个项目会触发两次单击事件（有时不一致，特别是在 IE9 中）。这在其他浏览器中正常触发。

检查 IE11 开发人员工具中的元素并单击“事件”选项卡仅显示注册了一个单击事件处理程序，所以我真的不确定这个额外事件的来源。这是IE中的错误吗？还是在道场-bootstrap？任何人都可以阐明这一点吗？我很确定我可以破解一个解决方法来防止它，但我真的很想知道原因，所以我至少可以在可能的情况下进行适当的修复。

我在 jsfiddle 中重现了这个问题：http://jsfiddle.net/m5pkooo1/ 代码也如下所示。

真正令人困惑的是应用程序中的其他事件正常触发。我在示例中添加了一个星号，您可以打开和关闭它，并且该事件会正常触发，并且我正在以相同的方式将处理程序添加到两个元素。添加警报是为了使双重事件更加可见，否则它就好像什么都没发生一样，因为它打开然后关闭的速度比浏览器呈现任何东西的速度都快。

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>

Javascript

require(["dojo/query", "dojo/on", "dojo/dom-class", "bootstrap/Collapse", "dojo/domReady!"], function (query, on, domClass) {
    dojo.query(".itemControl>span").on('click', function (event) {
        domClass.toggle(this, "glyphicon-star-empty");
        domClass.toggle(this, "glyphicon-star");
        event.stopPropagation();
    });
    dojo.query(".itemControl").on('click', function (event) {
        //debugger;
        alert("clicked: " + this.children[0].innerHTML);
        domClass.toggle(this, "active");
    });
});

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;
}

Answer 1

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

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

dom element click event firing twice only in IE

html

javascript

css

dojo

twitter-bootstrap