W3C home > Mailing lists > Public > public-html-ig-zh@w3.org > March 2012

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

From: Hawkeyes Wind <hawkeyes0.cn@gmail.com>
Date: Fri, 16 Mar 2012 13:52:05 +0800
Message-ID: <4F62D505.6060601@gmail.com>
To: public-html-ig-zh@w3.org
Firefox的行为跟其浏览器架构有关。
Firefox浏览器本身就是由其浏览器核心渲染呈现的,所以其右键的上下文菜单的 
原理与网页一致,即由鼠标事件触发,然后判断如果显示上下文菜 单,则继续触 
发contextmenu,否则跳过。
而Chrome和IE的浏览器本身并不是由浏览器核心渲染的,所以只好把一切都做成事 
件,然后在决定是否处理事件。

于 2012/3/16 13:35, Gray Zhang 写道:
> 根据昨天在#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

-- 
Regards

Hawkeyes Wind
Received on Friday, 16 March 2012 05:52:56 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 6 January 2015 20:43:50 UTC