Re: ����Mouse�¼���һЩ����

�ܽ�һ���ҵĽ��飺

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>

> �Ҽ���Ϊһ���DZȽϿӵ��ġ�
>
> �Ҽǵúܾúܾ���ǰ��2001�굽2002�����ң���w3c�������б��￴��һ�����Firefox���Ҽ���Ϊ�����ۡ�����Ҫ���������ڣ�������ҳֱ��д��<div
> onclick="window.open(...)">������onclick�����һ���������ת����´��ڵĶ�������Ȼ��������������Ľű���onclick�¼��������в�����ȥ�ж�event.button�������ǵı�����ֻ������������������Ҽ�����click�¼����͵��·������Ľ����
>
> IE���Լ�������Chrome�ȣ�Ӧ�þ�����Ϊ���ԭ���ѡ�����Ҽ�����click�¼���
>
>
> Firefox�Ŀ�������ѡ����һ������·�ߡ�������Ȼ����click�¼�������ֻ��document���Լ�window���ϴ�������������Ԫ���ϲ���������Ϊ��α��ť������ͨ������ע����Ԫ���ϵģ����������ȱ������Ҽ�����click�¼����ֱ�����ȫ�ֲ�׽�����Ҽ����ڵ�click�¼���������
>
> ��ʱ�Ҷ�Firefox�����ߵ�����һ���������в���������̾����˶Դ���ӡ��dz���̣�һֱ��������
>
> �������ᵽ�ĵڶ������죬��ʵ����ΪFF��ֹ���Ҽ�click��Ĭ����Ϊ����������contextmenu�¼������Բ�����Ϊ���⡣��
>
>
> �������»ع�������⣬��ҲҪ����һЩ�µĿ�����
>
> IE��Ϊ���磨IE
> 5.5�������ṩ��oncontextmenu�¼�����˽��Ӹ��������ṩ�����ԽǶ���˵��������Ҫ����ͨ��click�¼��������Ҽ�����������FF��ʱ��û��contextmenu�¼����������ټ���contextmenu�¼����������������д������ڲ���ʱ�䣬����contextmenu�¼���ʱ��һ���DZ�׼��IEר���¼����ټ��ϵ�ʱ��DOM
> Events Level
> 2�淶��ʵҪ���Ҽ�Ӧ����click�¼������ܶԴ��в�ͬ�����������Ϊ��׼����˼��Ӧ�ô���������˲������������������С�����������ȷʵ�dz�������DZϾ���һ��Υ��ͳһ�Ե�������
>
>
> �ӽ����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�Dz�ǡ���ġ�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���ݰ����IJ�ͬ�в�ͬ����Ϊ��������ȷ�������Ҽ���Right
>> click��ʱ����Ϊ�������Ϊ����Ҽ�Ӧ���ܴ���click�¼�������һ���ϣ�Firefox��������׼ʵ�֣�������document�ϴ���һ��������ð�ݵ��¼�����Ϊ��Ϊ���졣�ڹ����Ҽ���click�¼��Ĺ�ϵ�ϣ������ṩ��������ϻ����ۡ�
>>
>> 2. ����Ҽ�click�¼���default
>> action�ǡ��ṩcontextmenu���������click�¼���ʹ��preventDefault������ֹcontextmenu�ij��֣���һ�����������һ�¡����ǡ����ṩ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