Re: 关于Mouse事件的一些测试

右键行为一向是比较坑爹的。

我记得很久很久以前(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:13:44 UTC