Databases
StackOverflow2013
Postsdbo
POInternet Explorer leaks click event after adding an overlay in a jQuery mousedown handler
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POInternet Explorer leaks click event after adding an overlay in a jQuery mousedown handler
    primarykey
    data
    text
    <p>In a mousedown event-handler of a div another new div is created and appended to the body.<br> This new div has <code>position:fixed</code> (can also be <code>position:absolute</code>) and has 100% width and 100% height. Therefore it immediately covers the source div which triggered the mouse down event. Now with the latest Google Chrome (v30), latest Firefox (v24), Opera v12.16 and even with a older Safari v5.1.1 (on Windows) after the mousedown event <strong>no</strong> click event gets fired on an event listener attached to the body.<br> <strong>Only</strong> Internet Explorer (both 9 and 10) <strong>does</strong> fire the click event on the body afterwards! Why? And how can this be prevented? Is this actually a bug in IE?</p> <p>The HTML:</p> <pre><code>&lt;div class="clickme"&gt;Click me&lt;/div&gt; </code></pre> <p>The CSS:</p> <pre><code>.clickme { background-color: #BBB; } .overlay { position: fixed; /* or absolute */ left: 0; top: 0; height: 100%; width: 100%; background-color: #000; } </code></pre> <p>The JavaScript:</p> <pre><code>$(document).on('click', function(event) { console.log('body click'); }); $('.clickme').on('mousedown', function(event) { console.log('div mousedown'); var mask = $('&lt;div&gt;&lt;/div&gt;'); mask.attr('class', 'overlay'); mask.appendTo('body'); }); </code></pre> <p>Here is a the example with some additional comments: <a href="http://jsfiddle.net/Fh4sK/5/" rel="nofollow">http://jsfiddle.net/Fh4sK/5/</a></p> <p>After clicking the "Click me" div, only</p> <pre><code>div mousedown </code></pre> <p>should be written to the console, but in Internet Explorer it actually is</p> <pre><code>div mousedown body click </code></pre> <p>I appreciate any help! Thanks!</p> <p><strong>EDIT 1:</strong></p> <p>I found some resources describing the conditions when to trigger a click event:</p> <blockquote> <p><a href="http://www.quirksmode.org/dom/events/click.html" rel="nofollow">http://www.quirksmode.org/dom/events/click.html</a>:<br> "click - Fires when a mousedown and mouseup event occur on the same element."</p> <p><a href="http://www.w3.org/TR/DOM-Level-3-Events/#events-mouseevent-event-order" rel="nofollow">http://www.w3.org/TR/DOM-Level-3-Events/#events-mouseevent-event-order</a><br> "...in general should fire click and dblclick events when the event target of the associated mousedown and mouseup events is the same element with no mouseout or mouseleave events intervening, and should fire click and dblclick events on the nearest common ancestor when the event targets of the associated mousedown and mouseup events are different."</p> </blockquote> <p>I'm not 100% sure what the "correct" behaviour now actually should be (maybe IE is the only browser which handles it right?). From the last sentence, it seems that it is correct to fire the click event on the body, because the body is the "nearest common ancestor" of both div elements. There are some other statements on the referenced w3.org page above, which describe the behaviour if an element gets removed, but again I'm not sure if this applies here, as no element gets removed, but covered by an other element.</p> <p><strong>EDIT 2:</strong></p> <p>@Evan opened a bug report asking Microsoft to drop the described behaviour: <a href="https://connect.microsoft.com/IE/feedback/details/809003/unexpected-click-event-triggered-when-the-elements-below-cursor-at-mousedown-and-mouseup-events-are-different" rel="nofollow">https://connect.microsoft.com/IE/feedback/details/809003/unexpected-click-event-triggered-when-the-elements-below-cursor-at-mousedown-and-mouseup-events-are-different</a></p> <p><strong>EDIT 3:</strong></p> <p>In addition to Internet Explorer, Google Chrome recently started to have the same behaviour: <a href="https://code.google.com/p/chromium/issues/detail?id=484655" rel="nofollow">https://code.google.com/p/chromium/issues/detail?id=484655</a></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USmkurz
    1. USmkurz
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POInternet Explorer leaks click event after adding an overlay in a jQuery mousedown handler
      1. USairdump
      1. VTFavorite
    2. VO
      singulars
      1. POInternet Explorer leaks click event after adding an overlay in a jQuery mousedown handler
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POInternet Explorer leaks click event after adding an overlay in a jQuery mousedown handler
      1. USYan Brunet
      1. VTFavorite
    1. CO@RPM what do you mean by it?
      singulars
      1. POInternet Explorer leaks click event after adding an overlay in a jQuery mousedown handler
      1. USMr_Green
    2. COThe devious thing about this pickle is that the IE way of handling it is actually more intuitive
      singulars
      1. POInternet Explorer leaks click event after adding an overlay in a jQuery mousedown handler
      1. USLloyd Banks
    3. CO@LloydBanks, actually I'm not 100% sure what the "correct" behaviour should be. My assumption is that because a new layer gets added in the mousedown event-handler (which covers the original click-source-element), it seems that all browsers, except IE, assume, that this isn't a click on the body or the "clickme"-div anymore, because the element underneath the mouse pointer changed.
      singulars
      1. POInternet Explorer leaks click event after adding an overlay in a jQuery mousedown handler
      1. USmkurz
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload