325261 - Dispatching an event to a new target does not throw an exception after accessing cancelBubble

Status: RESOLVED WORKSFORME

(Core :: DOM: Events, defect, P5)

Description

[jim.toering]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b2) Gecko/20050702
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8b2) Gecko/20050702

Have case where I take an event (onclick) for a given html element and re dispatch that event to another element.  This worked in previous versions of firefox (not sure when it broke).

When the dispatchEvent happens I get the following in the javascript console

Error: uncaught exception: [Exception... "Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIDOMEventTarget.dispatchEvent]"  nsresult: "0x80070057 (NS_ERROR_ILLEGAL_VALUE)"  location: "JS frame :: http://localhost:8080/TestApp/testEventReDispatch.html :: redispatchEvent :: line 19"  data: no]

Oddly enough if I go through and access all of the event properties before dispatching the event it works ok.

Reproducible: Always

Steps to Reproduce:
With the following html you should be able to click on the div (green border) and have it trigger the onclick on the anchor which pops up a simple alert.

<HTML>
<HEAD>
	<TITLE>Redispatching an event</TITLE>

	<SCRIPT>
	function redispatchEvent(event, targetId)
	{
		target = document.getElementById(targetId);

		if(target.dispatchEvent)  // dom... firefox
		{
            // funky workaround...
			for (var i in event) event[i];

			target.dispatchEvent(event);	
		}
		else  // IE
		 target.fireEvent("on"+event.type, event);		
	}
	</SCRIPT>
</HEAD>

<BODY>

  <a id="myanchor" onclick="javascript:alert('anchor click fired')">My Anchor</a>
 
  	
  <div style="border: 1px solid green" onclick="redispatchEvent(event, 'myanchor');">
	  I'm a div.  Click on me to redispatch click event to My Anchor
  </div>
	
</BODY>
</HTML>



Actual Results:  
The click event on the anchor never fires and there is exception in javascript console.

Expected Results:  
click event on the anchor fires

Comment 1

[jim.toering]

Attachment: Redispatch an event

Note the funky workaround prior to the dispatchEvent call.

Comment 2

[Aiko]

Attachment: another testcase

This should throw an exception, that's what the DOM Event specification says. The real bug here is your funky workaround, which can be reduced to "event.cancelBubble".

Comment 3

[zug_treno]

Related to/duplicate of bug 301531 -> bug 298423?

Comment 4

[Aiko]

(In reply to comment #3)
> Related to/duplicate of bug 301531 -> bug 298423?

Well, the bug as stated in the summary is the same as bug 301531 but the cancelBubble workaround is not covered by these bugs. 

For what it's worth in the meantime I've tested that cancelBubble is the only event property exhibiting this behaviour. I couldn't find a previous bug report so I'm going to confirm this and adjust the summary.

Comment 5

[jim.toering]

As someone mentioned my initial test case and clunky workaround boiled down to cancelling the original events bubbling which makes perfect sense when you read the spec.  Or rather makes perfect sense when you read the correct spec.  It is specific to DOM Level 3 dispatchEvent which states that a dispatchEvent will throw an exception if the event is already being dispatched within the same tree.  In this case cancelBubble stops the original event from being bubbled up the tree allowing it to be redispatched.

Comment 6

[JB]

Attachment: Event Cancelling and redirecting example

Comment 7

[JB]

In this example (modified from The Javascript Bible 4th Ed Listing 29.09), the dispatched event triggers at the BODY (with target "BODY") and bubbles up to the window level, then somehow restart at the FORM level, again with target "BODY" and bubbles up again. Shome mishtake shurely?
BTW, when did method 'event.preventBubble()' get dropped? In IE the cancelBubble property has to be set to true to cancel bubbling, why does reading the read only property in Firefox have the same effect? (Excuse possible stupid question from a newby).

Comment 8

[JB]

I did some more experiments. The following code fragments are for the buttonEvent(form,evt)function line 27 onwards in the attachment 'Event Cancelling & Redirecting example'.

Case A
           evt.cancelBubble
		document.body.dispatchEvent(evt)

"evt.cancelBubble" reads the property which seems to prevent dispatchEvent from throwing an exception, but doesn't actually stop bubbling (as you can see if you 
comment out the second line) , so when the dispatched event terminates the original event carries on albeit with its target changed to that of the dispatched event.

Case B
            evt.stopPropagation()
            document.body.dispatchEvent(evt)
"evt.stopPropagation()" does exactly that (again comment out the second line to see this), but dispatchEvent throws an exception so no event continues.

Case C
           evt.cancelBubble=true
		document.body.dispatchEvent(evt)

"evt.cancelBubble=true" does stop bubbling but dispatchEvent again throws an exception - no event continues.

Case D
           evt.cancelBubble
           evt.stopPropagation()
		document.body.dispatchEvent(evt)

Propagation of the original event is stopped, but the new event  with target 'body' seems to bubble up to the FORM first i.e. not be dispatched at all. The order of the first two lines doesn't matter. Related to case A?

Case E
           evt.cancelBubble=true
           evt.cancelBubble
      	document.body.dispatchEvent(evt)
The behaviour is the same as case D. However, if you reverse the order of the first two lines i.e. read evt.cancelBubble before you write to it, the write action doesn't work and bubbling is not cancelled - so then you get the behaviour of case A.

That seems to about cover it: the Case A behaviour seems to me to be closest
to the Level 3 DOM spec as stated at 
http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-listeners-reentrance
notwithstanding what it later says about dispatchEvent() at
http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-EventTarget-dispatchEvent 
The exception generated doesn't mention 'DISPATCH_REQUEST_ ERR'.
I've replicated these results in Firefox 1.5 running on a PC
under Windows 98 and a Mac under OS10.3 .
Can anyone clarify?

Comment 9

[JB]

Attachment: Working dispatchEvent example

Comment 10

[JB]

I appear to be talking to myself, but for the record: it seems that you may not redispatch or reroute an event. You may however generate a new event which is handled whilst the old one is suspended(assuming it wasn't terminated. So for the above example the code
                newEvent=document.createEvent("MouseEvent")
                newEvent.initMouseEvent("click",true,true,null,1,100,100,evt.clientX,evt.clientY,false,false,false,false,0,evt.target)
		document.body.dispatchEvent(newEvent)

creates a new mouse event, initialises it as a click with the same client X,Y as the original (see http://www.w3.org/TR/2001/WD-DOM-Level-3-Events-20010823/events.html#Events-Event-initEvent for parameter details), then dispatches it to the BODY element from where it bubbles up. After the new event has terminated the handling of the old event continues with it bubbling up to the FORM element etc. See attached revised example.
If you try to clone the original event by saying 'newEvent=evt', you get a weird linkage between the two objects which causes misbehaviour.
JB

Comment 11

[Firefox Bug Husbandry Bot]

https://bugzilla.mozilla.org/show_bug.cgi?id=1472046

Move all DOM bugs that haven't been updated in more than 3 years and has no one currently assigned to P5.

If you have questions, please contact :mdaly.

Comment 12

[Andrei Purice]

Marking this as Resolved > Worksforme since the issue no longer is reproducible on the latest versions of Firefox Nightly 95.0a1 (2021-10-21), beta 94.0b9 or release 93.0 on Windows 10. The prompt with "anchor click fired" is shown after click.
If anyone can still reproduce the issue either re-open it or file a new one.