Re: 关于Mouse事件的一些测试 from John Hax on 2012-03-19 (public-html-ig-zh@w3.org from March 2012)

From: John Hax <johnhax@gmail.com>
Date: Tue, 20 Mar 2012 03:38:10 +0800
To: Gray Zhang <otakustay@gmail.com>
Cc: public-html-ig-zh@w3.org
Message-ID: <CAEeYXHVdi85KjbhdvA=a67q9SyhLqsUQmvDmCOVrzKB8ZzgMEg@mail.gmail.com>
总结一下我的建议：

DOM Level 3 Event 规范（
http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html）应该：

1. 明确只有左键才触发click事件，中键和右键不应触发click事件。修改关于click的default action的说明。

2. 收入contextmenu事件，与click事件并列。这两个事件的接口可改为MouseContextEvent之类的名字（extends
MouseEvent），并且增加一个属性relatedEvent（或者类似的名字），其值为引起该事件的设备事件，如MouseEvent或KeyboardEvent或TouchEvent或null（表示由脚本触发，比如调用click()引起）。

3.   可考虑增加mouseclick事件，作为真正的mouse
click事件（和mouseup/mousedown/dblclick一样是纯鼠标设备事件）。原先click的default
action说明适用于此事件。

2012/3/20 John Hax <johnhax@gmail.com>

> 右键行为一向是比较坑爹的。
>
> 我记得很久很久以前（2001年到2002年左右）在w3c的讨论列表里看过一个针对Firefox的右键行为的讨论。最主要的问题在于，大量网页直接写：<div
> onclick="window.open(...)">，即用onclick来替代一般的链接跳转或打开新窗口的动作。显然，绝大多数这样的脚本在onclick事件处理器中并不会去判断event.button，而他们的本意是只针对左键点击。因此如果右键触发click事件，就导致非期望的结果。
>
> IE（以及后来的Chrome等）应该就是因为这个原因而选择不让右键触发click事件。
>
>
> Firefox的开发者则选择了一条折中路线。即，仍然触发click事件，但是只在document（以及window）上触发，而在其他元素上不触发。因为“伪按钮”动作通常都是注册在元素上的，所以这样既避免了右键触发click事件，又保留了全局捕捉包括右键在内的click事件的能力。
>
> 当时我对Firefox开发者的这样一种巧妙折中不禁由衷赞叹，因此对此事印象非常深刻，一直记忆至今。
>
> （至于提到的第二个差异，其实是因为FF阻止了右键click的默认行为——即触发contextmenu事件。所以并不成为问题。）
>
>
> 今天重新回顾这个问题，我也要补充一些新的看法。
>
> IE因为很早（IE
> 5.5？）就提供了oncontextmenu事件，因此仅从给开发者提供的特性角度来说，并不需要保留通过click事件来处理右键的能力。而FF当时还没有contextmenu事件，或者至少加入contextmenu事件与做出这样的折中处理是在差不多的时间，况且contextmenu事件当时是一个非标准的IE专有事件，再加上当时的DOM
> Events Level
> 2规范其实要求右键应触发click事件（尽管对此有不同解读，但我认为标准的意思是应该触发），因此不得已做出这样的折中。这样的折中确实非常巧妙，但是毕竟是一个违背统一性的特例。
>
>
> 从今天的web开发情况来看，我们仍然在写onclick="xxx"并且从来不在里面检测button值。而click事件本身也从一个鼠标事件变为更接近device
> independent的一般性的activate事件，比如在链接上按Enter也会触发click事件。【注：在DOM规范里原先是加入了DOMActivate事件，但是由于各种原因，实际上这个事件并没有人使用，大家还是用click了。】
>
> 另一方面，我们也有了contextmenu事件，且该事件也是一个device
> independent事件，如按键盘上的contextmenu按键也能触发该事件。
>
>
> 因此从今天来看，我认为比较好的方式是IE/Chrome的方式。而DOM
> Events标准应该做的是，将click事件和contextmenu事件对应列出（目前DOM
> Events标准没有收入contextmenu事件），并说明其并非普通的MouseEvent，而是特殊的事件（我个人想了个名字如MouseContextEvent？）。
>
> 目前还存在一个问题就是IE/Chrome左键触发click，右键不触发，但是中键也会触发click。个人认为这个行为是有问题的，只是因为中键用的少而不太有人关注。应该像FF一样，中键不触发click（虽然FF会在document/window上触发）。即使是在a元素上，中键常常是在新窗口/Tab打开链接，也许可视为一种特殊的activate动作。但是考虑到click事件的实际用法，我仍然认为中键触发click是不恰当的。DOM
> Events标准应该对此予以说明。
>
>
>
>
> 2012/3/16 Gray Zhang <otakustay@gmail.com>
>
>>   根据昨天在#javascript罗浮宫2群#与@可乐
>> 同学的讨论，浏览器在处理鼠标右键的MosueEvent序列时存在一些不同，在此摘录并邀请大家讨论：
>>
>> 测试页面如下：
>>
>>
>> <!DOCTYPE html>
>> <html>
>> <head>
>> <meta charset="utf-8" />
>>     <title>Hello World</title>
>> </head>
>> <body>
>>     <div style="width: 400px; height: 400px; background: red;"></div>
>>     <script>
>>         var div = document.getElementsByTagName('div')[0];
>>         div.addEventListener('mousedown', function() {
>> console.log('mousedown on div'); }, false);
>>         div.addEventListener('up', function() { console.log('mousedown on
>> div'); }, false);
>>         div.addEventListener('click', function() { console.log('mousedown
>> on div'); }, false);
>>         div.addEventListener('contextmenu', function() {
>> console.log('mousedown on div'); }, false);
>>         document.addEventListener('mousedown', function() {
>> console.log('mousedown on document'); }, false);
>>         document.addEventListener('up', function() {
>> console.log('mousedown on document'); }, false);
>>         document.addEventListener('click', function() {
>> console.log('mousedown on document'); }, false);
>>         document.addEventListener('contextmenu', function() {
>> console.log('mousedown on document'); }, false);
>>     </script>
>> </body>
>> </html>
>>
>> 在红色的<div>元素上右键单击一次后，出现的事件顺序在各浏览器中如下：
>>
>> Chrome 17：
>> mousedown on div
>> mousedown on document
>> mouseup on div
>> mouseup on document
>> contextmenu on div
>> contextmenu on document
>>
>> Firefox 11：
>> mousedown on div
>> mousedown on document
>> mouseup on div
>> mouseup on document
>> click on document
>> contextmenu on div
>> contextmenu on document
>>
>> IE 9：
>> mousedown on div
>> mousedown on document
>> mouseup on div
>> mouseup on document
>> contextmenu on div
>> contextmenu on document
>>
>>
>> 可以看到，Chrome和IE行为相同，而Firefox会额外在document上触发一个click事件，且该事件不捕获（有使用useCapture参数测试）不冒泡。
>>
>> 如果给所有的事件处理函数加上preventDefault行为，则各浏览器中的结果如下：
>>
>> Chrome 17：
>> mousedown on div
>> mousedown on document
>> mouseup on div
>> mouseup on document
>> contextmenu on div
>> contextmenu on document
>> 不弹出菜单
>>
>> Firefox 11：
>> mousedown on div
>> mousedown on document
>> mouseup on div
>> mouseup on document
>> click on document
>> 不弹出菜单
>>
>> IE 9：
>> mousedown on div
>> mousedown on document
>> mouseup on div
>> mouseup on document
>> contextmenu on div
>> contextmenu on document
>> 不弹出菜单
>>
>> 同样Chrome和IE9有相同的结果，Firefox则会因为click事件中的preventDefault行为影响contextmenu事件的触发
>>
>> 根据DOM Event Level3（
>> http://www.w3.org/TR/DOM-Level-3-Events/#event-type-click ）中的描述：
>>
>>
>>
>> The default action of the click event type varies based on the proximal
>> event target of the event and the value of the MouseEvent.button or
>> MouseEvent.buttons attributes. Typical default actions of the click event
>> type are as follows:
>>
>> Left click (MouseEvent.button value is 0, MouseEvent.buttons value is 1):
>>     If the proximal event target has associated activation behavior, the
>> default action must be to execute that activation behavior (see Activation
>> triggers and behavior).
>>     If the proximal event target is focusable, the default action must be
>> to give that element document focus.
>>
>> Right click (MouseEvent.button value is 1, MouseEvent.buttons value is 2):
>>     The default action must be to provide a context menu of options
>> related to that proximal event target.
>>
>> Middle click (MouseEvent.button value is 2, MouseEvent.buttons value is
>> 4):
>>     If the proximal event target has associated activation behavior, the
>> default action must be to execute that activation behavior in an alternate
>> fashion (such as opening a link in a new tab or window).
>>     If the proximal event target has no associated activation behavior,
>> the default action must be device- and user-defined, but when associated
>> with a device wheel, is often to activate an alternate scrolling or panning
>> mode.
>>
>> 可以有以下结论：
>>
>>
>> 1. click事件的default action根据按键的不同有不同的行为，并且明确定义了右键（Right
>> click）时的行为，因此认为鼠标右键应当能触发click事件。在这一点上，Firefox更靠近标准实现，但仅在document上触发一个不捕获不冒泡的事件，行为较为怪异。在关于右键与click事件的关系上，请大家提供更多的资料或讨论。
>>
>> 2. 鼠标右键click事件的default
>> action是“提供contextmenu”，因此在click事件中使用preventDefault，会阻止contextmenu的出现，这一点所有浏览器一致。但是“不提供contextmenu”是否意味着同时“不触发contextmenu”事件，在这点上各浏览器理解不同，Chrome和IE都选择触发contextmenu但不显示菜单，这一点类似HTML标准中由tabindex引起不可聚焦元素变为可聚焦时（
>> http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#focus ）的相关行为（activation
>> behavior which will fire a xxx event but does
>> nothing）。但是Firefox选择同时阻止contextmenu事件的触发。在这两者之间哪一个正为准确，邀请大家讨论。
>>
>> --------------------------------------------------------
>>
>> Gray Zhang
>> Mail: otakustay@gmail.com
>> Blog: http://www.otakustay.com
>> Weibo: http://www.weibo.com/otakustay
>>
>
>
Received on Monday, 19 March 2012 19:38:44 UTC