Question

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

在IE11开发人员工具中检查元素并单击“事件”选项卡只显示已注册的单击事件处理程序，因此我真的不确定此额外事件的来源。这是IE中的错误吗？或者在dojo-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项内的标签标签是造成问题的原因。＆＃34; for＆＃34;属性将其绑定到它的父元素，并且似乎触发了另一次单击。尝试将其切换到另一个内联元素（span或b标记），您的问题将得到解决。使用它无论如何都没有语义，因为它传统上与输入标签一起使用。

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

1 个答案: