title: dom element click event firing twice only in IE
body: <p>I have come across an issue where a dom element click event fires twice in IE 9 and IE 11 (I haven't tested in other IE versions). I'm using <strong>dojo</strong>, <a href="http://xsokev.github.io/Dojo-Bootstrap/" rel="nofollow"><strong>dojo-bootstrap</strong></a>, and <strong>boostrap css</strong> and the dom element in question is an item within a bootstrap Collapse plugin. It works fine in Chrome and Firefox but when viewed in IE clicking on an item fires the click event twice (inconsistently sometimes, particularly in IE9). This fires normally in other browsers. </p>
  
  <p>Inspecting the element in IE11 Developer Tools and clicking on the Events tab only shows a single click event handler registered so I'm really unsure where this extra event is coming from. Is this a bug in IE? Or in dojo-bootstrap? Can anyone shed some light on this? I'm pretty sure I can hack in a workaround to prevent it but I'd really like to know the reason so I could at least put in a proper fix if possible.</p>
  
  <p>I have re-created the issue in a jsfiddle: <a href="http://jsfiddle.net/m5pkooo1/" rel="nofollow">http://jsfiddle.net/m5pkooo1/</a> and the code is also shown below.</p>
  
  <p>The really confusing thing is other events in the app fire fine. I've added a star to the sample you can toggle on and off and that event fires fine and I'm adding the handlers to both elements the same way. The alert is added to make the double event more visible since it otherwise just appears as though nothing happens because it turns it on and then off faster than the browser can render anything.</p>
  
  <p><strong>dojoConfig</strong></p>
  
  <pre><code>data-dojo-config='isDebug: 1, async: 1, cacheBust: 0, packages: [ { name: "bootstrap", location: "https://rawgit.com/xsokev/Dojo-Bootstrap/master" }]'
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="theControls" class="panel-group"&gt;
      &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading " role="tab" id="headingOne"&gt;
               &lt;h4 class="panel-title"&gt;
              &lt;a role="button" class="btn btn-primary" data-toggle="collapse" data-target="#collapse1" 
                  data-parent="#theControls"&gt;Collapse 1 - list-group&lt;/a&gt;
              &lt;/h4&gt;
          &lt;/div&gt;
          &lt;div id="collapse1" class="panel-collapse collapse in"&gt;
              &lt;ul id="collapse1-body" class="list-group"&gt;
                  &lt;li class="itemControl" id="itemControl1-1"&gt;
                      &lt;label for="itemControl1-1" class="itemControlLabel"&gt;item 1-1&lt;/label&gt; 
                      &lt;span title="star me!" class="icon floater-right glyphicon glyphicon-star-empty"&gt;&lt;/span&gt;
                  &lt;/li&gt;
                  &lt;li class="itemControl" id="itemControl1-2"&gt;
                      &lt;label for="itemControl1-2" class="itemControlLabel"&gt;item 1-2&lt;/label&gt;
                      &lt;span title="star me!" class="icon floater-right glyphicon glyphicon-star-empty"&gt;&lt;/span&gt;
                  &lt;/li&gt;
                  &lt;li class="itemControl" id="itemControl1-3"&gt;
                      &lt;label for="itemControl1-3" class="itemControlLabel"&gt;item 1-3&lt;/label&gt;
                      &lt;span title="star me!" class="icon floater-right glyphicon glyphicon-star-empty"&gt;&lt;/span&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading" role="tab" id="headingOne"&gt;
               &lt;h4 class="panel-title"&gt;
                  &lt;a role="button" class="btn btn-primary" data-toggle="collapse" 
                   data-parent="#theControls" data-target="#collapse2"&gt;Collapse 2 - panel-body (divs)&lt;/a&gt;
                &lt;/h4&gt;
          &lt;/div&gt;
          &lt;div id="collapse2" class="panel-collapse collapse" role="tabpanel"&gt;
              &lt;div class="panel-body"&gt;
                  &lt;div class="itemControl" id="itemControl2-1"&gt;
                      &lt;label for="itemControl2-1" class="itemControlLabel"&gt;item 2-1&lt;/label&gt;
                      &lt;span title="star me!" class="icon floater-right glyphicon glyphicon-star-empty"&gt;&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="itemControl" id="itemControl2-2"&gt;
                      &lt;label for="itemControl2-2" class="itemControlLabel"&gt;item 2-2&lt;/label&gt;
                      &lt;span title="star me!" class="icon floater-right glyphicon glyphicon-star-empty"&gt;&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="itemControl" id="itemControl2-3"&gt;
                      &lt;label for="itemControl2-3" class="itemControlLabel"&gt;item 2-3&lt;/label&gt;
                      &lt;span title="star me!" class="icon floater-right glyphicon glyphicon-star-empty"&gt;&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading" role="tab" id="headingOne"&gt;
               &lt;h4 class="panel-title"&gt;
                  &lt;a role="button" class="btn btn-primary" data-toggle="collapse" 
                   data-parent="#theControls" data-target="#collapse3"&gt;Collapse 3 - panel-body (spans)&lt;/a&gt;
                &lt;/h4&gt;
          &lt;/div&gt;
          &lt;div id="collapse3" class="panel-collapse collapse" role="tabpanel"&gt;
              &lt;div class="panel-body"&gt;
                  &lt;span class="itemControl" id="itemControl3-1"&gt;
                      &lt;label for="itemControl3-1" class="itemControlLabel"&gt;item 3-1&lt;/label&gt;
                      &lt;span title="star me!" class="icon floater-right glyphicon glyphicon-star-empty"&gt;&lt;/span&gt;
                  &lt;/span&gt;
                  &lt;span class="itemControl" id="itemControl3-2"&gt;
                      &lt;label for="itemControl3-2" class="itemControlLabel"&gt;item 3-2&lt;/label&gt;
                      &lt;span title="star me!" class="icon floater-right glyphicon glyphicon-star-empty"&gt;&lt;/span&gt;
                  &lt;/span&gt;
                  &lt;span class="itemControl" id="itemControl3-3"&gt;
                      &lt;label for="itemControl3-3" class="itemControlLabel"&gt;item 3-3&lt;/label&gt;
                      &lt;span title="star me!" class="icon floater-right glyphicon glyphicon-star-empty"&gt;&lt;/span&gt;
                  &lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading" role="tab" id="headingOne"&gt;
               &lt;h4 class="panel-title"&gt;
                  &lt;a role="button" class="btn btn-primary" data-toggle="collapse" 
                   data-parent="#theControls" data-target="#collapse4"&gt;Collapse 4 - panel-body (anchors)&lt;/a&gt;
                &lt;/h4&gt;
          &lt;/div&gt;
          &lt;div id="collapse4" class="panel-collapse collapse" role="tabpanel"&gt;
              &lt;div class="panel-body"&gt;
                  &lt;a class="itemControl" id="itemControl4-1"&gt;
                      &lt;label for="itemControl4-1" class="itemControlLabel"&gt;item 4-1&lt;/label&gt;
                      &lt;span title="star me!" class="icon floater-right glyphicon glyphicon-star-empty"&gt;&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;a class="itemControl" id="itemControl4-2"&gt;
                      &lt;label for="itemControl4-2" class="itemControlLabel"&gt;item 4-2&lt;/label&gt;
                      &lt;span title="star me!" class="icon floater-right glyphicon glyphicon-star-empty"&gt;&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;a class="itemControl" id="itemControl4-3"&gt;
                      &lt;label for="itemControl4-3" class="itemControlLabel"&gt;item 4-3&lt;/label&gt;
                      &lt;span title="star me!" class="icon floater-right glyphicon glyphicon-star-empty"&gt;&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>require(["dojo/query", "dojo/on", "dojo/dom-class", "bootstrap/Collapse", "dojo/domReady!"], function (query, on, domClass) {
      dojo.query(".itemControl&gt;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");
      });
  });
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.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;
  }
  </code></pre>