W3C home > Mailing lists > Public > www-dom@w3.org > April to June 2011

Re: Click event on button element when event targets of the associated mousedown and mouseup are different

From: Olli Pettay <Olli.Pettay@helsinki.fi>
Date: Fri, 06 May 2011 12:31:32 +0300
Message-ID: <4DC3BFF4.3010205@helsinki.fi>
To: Jacob Rossi <Jacob.Rossi@microsoft.com>
CC: Ryosuke Niwa <rniwa@webkit.org>, "www-dom@w3.org" <www-dom@w3.org>
On 05/06/2011 03:55 AM, Jacob Rossi wrote:
>> -----Original Message-----
>> From: Olli Pettay [mailto:Olli.Pettay@helsinki.fi]
>> Sent: Thursday, May 05, 2011 6:04 AM
>> To: Ryosuke Niwa
>> Cc: www-dom@w3.org; Jacob Rossi
>> Subject: Re: Click event on button element when event targets of the associated
>> mousedown and mouseup are different
>>
>> On 04/16/2011 02:20 AM, Ryosuke Niwa wrote:
>>> On Fri, Apr 15, 2011 at 2:54 AM, Olli Pettay<Olli.Pettay@helsinki.fi
>>> <mailto:Olli.Pettay@helsinki.fi>>  wrote:
>>>
>>>      Nope, it is not the DOM 3 Events definition of click which leads to
>>>      that bug. It is the hit testing. In Firefox hit testing leads mouse
>>>      events to be dispatched to button element and click event dispatching to
>>>      work per the spec also in this case.
>>>
>>>
>>> Oh, sure.  I didn't mean that Firefox's behavior is due to DOM Level 3
>>> Events.  I only referred to it to be the cause of the WebKit bug.
>>>
>>> On Fri, Apr 15, 2011 at 2:59 AM, Olli Pettay<Olli.Pettay@helsinki.fi
>>> <mailto:Olli.Pettay@helsinki.fi>>  wrote:
>>>
>>>          Nope, it is not the DOM 3 Events definition of click which leads
>>>          to that
>>>          bug. It is the hit testing. In Firefox hit testing leads mouse
>>>          events to
>>>          be dispatched to button element and click event dispatching to
>>>          work per the spec also in this case.
>>>
>>>
>>>      I could still add that the reason for Firefox's behavior is HTML 4 spec
>>>      "Buttons created with the BUTTON element function just like buttons
>>>      created with the INPUT element, but they offer richer rendering
>>>      possibilities"
>>>
>>>
>>> I see. That's a reasonable argument. In fact, IE7 / IE8 seem to have
>>> the same behavior.
>>>
>>> Should D3E define hit testing? I feel like D3E is a better place to
>>> spec this than HTML5 but I'm not even sure if we can spec precisely
>>> because there might be some platform/browser-specific behavior that
>>> needs to be maintained.
>>>
>>> Now putting hit-testing problem aside, do you think we should only
>>> fire a click event when target nodes match?
>>>
>>> If there are no strong oppositions, *I'd like to propose to change the
>>> spec to always fire click events on the lowest common ancestor* so
>>> that websites can at least catch the event on button element in the
>>> said situation.
>> Well, the button element behavior depends on hit testing.
>> Couldn't webkit do what Gecko/IE7/IE8/Opera do?
>>
>>
>>>
>>> IE9 seems to special case button element and doesn't fire click event
>>> when mousedown happens inside button and mouseup happens elsewhere
>> but
>>> that's an edge case that might not be worth spec'ing right now.
>>
>>
>> Jacob, do you know why IE9 doesn't handle click event according to D3E?
>>
>
> This is not the behavior I'm witnessing in IE9. I see IE9 matching Gecko/IE7/IE8: all events target the button.
But what about the other, non-button, click handling? Earlier in this 
thread it was mentioned that
"Internet Explorer seems to always fire click event on the lowest common 
ancestor of target nodes of mouseup and mousedown." and that
"IE9 seems to special case button element"

But with button element is seems that Gecko/IE7/IE8/IE9/Opera have
the same behavior and webkit does something else.



> I think this should be defined, but in HTML5 because it's specific to the BUTTON element.
> Here's my test page:
>
> <!DOCTYPE html>
> <html>
> <head>
> 	<title>BUTTON mouse events targeting</title>
> </head>
> <body>
>
> <button>  www<span>  DOM</span>  level 3</button>
>
> <div id="log"></div>
> <script>
> function log(e) {
> 	e = e || window.event;
> 	t = e.target || e.srcElement;
> 	document.getElementById("log").innerHTML += e.type + ": " + t.tagName + "<br>";
> }
> window.onload = function(){
> 	if(window.addEventListener) {
> 		window.addEventListener("mousedown",log,false);
> 		window.addEventListener("mouseup",log,false);
> 		window.addEventListener("click",log,false);
> 	}else{
> 		document.attachEvent("onmousedown",log);
> 		document.attachEvent("onmouseup",log);
> 		document.attachEvent("onclick",log);
> 	}
>   }
> </script>
> </body>
> </html>
>
>>
>> -Olli
>>
>>
>
>
Received on Friday, 6 May 2011 09:32:06 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Friday, 22 June 2012 06:14:07 GMT