- 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> > �Ҽ���Ϊһ���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