RE: Question about event bubbling in FF versus IE and Chrome?

Thanks, you reproduced exactly what was confusing me. I probably confused things by mentioning bubbling, though it does seem that way given the behaviors of the rest like contextmenu and onmouseup, all of which do bubble.

So, is that correct to have onclick fire on the document when an element is right clicked on the page?

From what I can tell, this does not appear to occur in IE or Chrome.

Granted it can be handled using stopPropagation, but isn't there a standard for event firing in browsers where this sequence of events is documented?

It's just a pain to have to code around these types of cross browser differences, so it would be nice if browsers treated event firing sequences equally.

-----Original Message-----
From: Joseph Scheuhammer [mailto:clown@alum.mit.edu] 
Sent: Thursday, January 29, 2015 8:07 AM
To: Bryan Garaventa
Cc: Scott González; WAI Protocols & Formats
Subject: Re: Question about event bubbling in FF versus IE and Chrome?

Hi Bryan,

On 2015-01-27 2:58 PM, Bryan Garaventa wrote:
>
> Thanks, the attachment just uses jQuery to bind the events.
>
> > Right clicks should not result in a click event regardless of other
> events.
>
> **
>
> *That’s what I was trying to determine, in Firefox, if you right click 
> an element on the page, it bubbles an onClick to the document, where 
> it does not in IE or Chrome.*
>
> **
>

It's not clear that the click event is bubbling.

I added console messages to your event handlers as well as adding a "mouseup" handler to the document object.  In FF, when right clicking on the input, the sequence of events is:

- input:contextmenu
- document:contextmenu
- input:mouseup
- document:mouseup
- document:click

Both the "contextmenu" and "mouseup" events bubble from the input to the document.  The document click event is associated only with the document.  Since there is no "input:click" event, it does not appear to bubble up from anywhere.

I wrote:
> In order to stop bubbling, call event.stopPropagation().

I then added stopPropagation() to all of the event handlers bound to the input.  The results of a right click on the input in that case are:
- input:contextmenu
- input.mouseup
- document.click

The "contextmenu" and "mouseup" events no longer bubble up to the document.  There is still a "click" event associated with the document, and, again, only with the document.  I'm not sure why that happens.

I've attached the two files I used in the test:
- "mouseup_testOrig.html" is your original code with the added calls to console.log(), and the "mouseup" handler bound to the document.
- "mouseup_testStop.html"  is the same code but with
event.stopPropagation() added to input's handlers.

--
;;;;joseph.

'Array(16).join("wat" - 1) + " Batman!"'
            - G. Bernhardt -

Received on Thursday, 29 January 2015 19:25:45 UTC