的onclick的事件處理函數(shù)了，那么就把cancelbubble設(shè)置為false即可。[br] [br]二、 ie中拖動(dòng)dom元素的例子[br]/*[br] 該函數(shù)由mousedown事件處理調(diào)用[br] 它為隨后發(fā)生的mousemove和mouseup事件注冊(cè)了臨時(shí)的捕捉事件處理程序[br] 并用這些事件處理程序拖動(dòng)指定的文檔元素[br] 第二個(gè)參數(shù)必須是mousedown事件的事件對(duì)象[br]*/[br]function begindrag(elementtodrag,event)[br]{[br] //該元素當(dāng)前位于何處[br] //該元素的樣式性質(zhì)必須具有l(wèi)eft和top css屬性[br] //此外，我們假定他們用象素做單位[br] //var x=parseint(elementtodrag.style.left);[br] //var y=parseint(elementtodrag.style.top); [br] //計(jì)算一個(gè)點(diǎn)和鼠標(biāo)點(diǎn)擊之間的距離，下面的嵌套的movehandler函數(shù)需要這些值[br] var deltax=event.clientx-parseint(elementtodrag.style.left);[br] var deltay=event.clienty-parseint(elementtodrag.style.top); [br]// 注冊(cè)mousedown事件后發(fā)生的mousemove和mouseup事件的處理程序[br]// 注意，它們被注冊(cè)為文檔的捕捉事件處理程序[br]// 在鼠標(biāo)按鈕保持按下的狀態(tài)的時(shí)候，這些事件處理程序保持活動(dòng)的狀態(tài)[br]// 在按鈕被釋放的時(shí)候，它們被刪除[br] document.attachevent("onmousemove",movehandler);[br] document.attachevent("onmouseup",uphandler); [br] //我們已經(jīng)處理了該事件，不要讓別的元素看到它[br]event.cancelbubble=true;[br]event.returnvalue=false; [br] /*[br] 這是在元素被拖動(dòng)時(shí)候捕捉mousemove事件的處理程序，它響應(yīng)移動(dòng)的元素 [br] */[br] function movehandler(e) [br] {[br] //把元素移動(dòng)到當(dāng)前的鼠標(biāo)位置[br] e=window.event;[br] elementtodrag.style.left=(event.clientx-deltax)+"px";[br] elementtodrag.style.top=(event.clienty-deltay)+"px"; [br] //不要讓別的元素看到該事件[br] event.cancelbubble=true; [br] } [br] /*[br] 該事件將捕捉拖動(dòng)結(jié)束的時(shí)候發(fā)生的mouseup事件[br] */[br] function uphandler(e)[br] {[br] //注銷事件處理程序[br] document.detachevent("onmouseup",uphandler);[br] document.detachevent("onmousemove",movehandler);} [br] event.cancelbubble=true;[br] } [br] 調(diào)用它的html文件代碼：[br] [br] [br]
untitled page[br] [br] [br] [br]
[br]
[br] 拖動(dòng)我 [br]
[br]
[br]
this is a test.testing,testing
[br]
[br] [br]三、 dom中的高級(jí)事件處理[br]ie 6中的事件處理，并不是w3c dom標(biāo)準(zhǔn)的事件處理模型，所以如果上述代碼運(yùn)行在mozilla firefox的瀏覽器中，就會(huì)失去作用，同時(shí)即將發(fā)布的ie 7也將支持w3c dom的二級(jí)標(biāo)準(zhǔn)，所以掌握dom的高級(jí)事件處理顯得就很重要了，因?yàn)閣3c dom二級(jí)標(biāo)準(zhǔn)是未來(lái)web的發(fā)展方向，同時(shí)w3c dom的api非常常用，為未來(lái)更加復(fù)雜的web開(kāi)發(fā)提供了良好的基礎(chǔ)。[br]（一）事件處理程序的作用域和事件的傳播[br] 在正式討論dom高級(jí)事件處理之前，我們有必要了解一下事件處理程序的作用域。事件處理程序的作用域要比普通的函數(shù)作用域復(fù)雜很多。普通的函數(shù)作用域鏈比較容易，例如在一個(gè)普通函數(shù)中查找一個(gè)變量a，那么javascript解釋器會(huì)先在該函數(shù)的調(diào)用對(duì)象中查找是否有a這個(gè)變量，如果沒(méi)有，將會(huì)在作用域鏈的下一個(gè)對(duì)象，一般是全局對(duì)象中查找。但是事件處理程序沒(méi)這么簡(jiǎn)單，特別是用html的屬性定義的，它們的作用域鏈的頭部是調(diào)用它們的對(duì)象，而下一個(gè)對(duì)象并不是全局對(duì)象，而是觸發(fā)事件處理程序的對(duì)象。這樣就會(huì)出現(xiàn)一個(gè)問(wèn)題，window和document都有一個(gè)方法open()，如果open()前面不加修飾，那么在事件處理的函數(shù)中將會(huì)調(diào)用document.open()方法，而不是常用的window.open()方法，所以使用的時(shí)候應(yīng)該明確指明是window.open()。[br]（二）事件傳播和注冊(cè)事件處理程序[br]1.事件傳播[br] 在二級(jí)dom標(biāo)準(zhǔn)中，事件處理程序比較復(fù)雜，當(dāng)事件發(fā)生的時(shí)候，目標(biāo)節(jié)點(diǎn)的事件處理程序就會(huì)被觸發(fā)執(zhí)行，但是目標(biāo)節(jié)點(diǎn)的父節(jié)點(diǎn)也有機(jī)會(huì)來(lái)處理這個(gè)事件。事件的傳播分為三個(gè)階段，首先是捕捉階段，事件從document對(duì)象沿著dom樹向下傳播到目標(biāo)節(jié)點(diǎn)，如果目標(biāo)的任何一個(gè)父節(jié)點(diǎn)注冊(cè)了捕捉事件的處理程序，那么事件在傳播的過(guò)程中就會(huì)首先運(yùn)行這個(gè)程序。下一個(gè)階段就是發(fā)生在目標(biāo)節(jié)點(diǎn)自身了，注冊(cè)在目標(biāo)節(jié)點(diǎn)上的相應(yīng)的事件處理程序就會(huì)執(zhí)行；最后是起泡階段，事件將從目標(biāo)節(jié)點(diǎn)向上傳回給父節(jié)點(diǎn)，同樣，如果父節(jié)點(diǎn)有相應(yīng)的事件處理程序也會(huì)處理。在ie中，沒(méi)有捕捉的階段，但是有起泡的階段?？梢杂胹toppropagation()方法來(lái)停止事件傳播，也就是讓其他元素對(duì)這個(gè)事件不可見(jiàn)，在ie 6中，就是把cancelbubble設(shè)置為true。[br]2.注冊(cè)事件處理程序[br] 和ie一樣，dom標(biāo)準(zhǔn)也有自己的事件處理程序，不過(guò)dom二級(jí)標(biāo)準(zhǔn)的事件處理程序比ie的強(qiáng)大一些，事件處理程序的注冊(cè)用addeventlistner方法，該方法有三個(gè)參數(shù)，第一個(gè)是事件類型，第二個(gè)是處理的函數(shù)，第三個(gè)是一個(gè)布爾值，true表示制定的事件處理程序?qū)⒃谑录鞑サ碾A段用于捕捉事件，否則就不捕捉，當(dāng)事件發(fā)生在對(duì)象上才觸發(fā)執(zhí)行這個(gè)事件處理的函數(shù)，或者發(fā)生在該對(duì)象的字節(jié)點(diǎn)上，并且向上起泡到這個(gè)對(duì)象上的時(shí)候，觸發(fā)執(zhí)行這個(gè)事件處理的函數(shù)。例如：document.addeventlistener("mousemove",movehandler,true);就是在mousemove事件發(fā)生的時(shí)候，調(diào)用movehandler函數(shù)，并且可以捕捉事件。[br] 可以用addeventlistener為一個(gè)事件注冊(cè)多個(gè)事件處理的程序，但是這些函數(shù)的執(zhí)行順序是不確定，并不像c#那樣按照注冊(cè)的順序執(zhí)行。[br] 在mozilla firefox中用addeventlistener注冊(cè)一個(gè)事件處理程序的時(shí)候，this關(guān)鍵字就表示調(diào)用事件處理程序的文檔元素，但是其他瀏覽器并不一定是這樣，因?yàn)檫@不是dom標(biāo)準(zhǔn)，正確的做法是用currenttarget屬性來(lái)引用調(diào)用事件處理程序的文檔元素。[br]3.二級(jí)dom標(biāo)準(zhǔn)中的event[br] 和ie不同的是，w3c dom中的event對(duì)象并不是window全局對(duì)象下面的屬性，換句話說(shuō)，event不是全局變量。通常在dom二級(jí)標(biāo)準(zhǔn)中，event作為發(fā)生事件的文檔對(duì)象的屬性。event含有兩個(gè)子接口，分別是uievent和mutationevent，這兩個(gè)子接口實(shí)現(xiàn)了event的所有方法和屬性，而mouseevent接口又是uievent的子接口，所以實(shí)現(xiàn)了uievent和event的所有方法和屬性。下面，我們就看看event、uievent和mouseevent的主要屬性和方法。[br] 1.event[br] type：事件類型，和ie類似，但是沒(méi)有“on”前綴，例如單擊事件只是“click”。[br] target：發(fā)生事件的節(jié)點(diǎn)。[br] currenttarget：發(fā)生當(dāng)前正在處理的事件的節(jié)點(diǎn)，可能是target屬性所指向的節(jié)點(diǎn)，也可能由于捕捉或者起泡，指向target所指節(jié)點(diǎn)的父節(jié)點(diǎn)。[br] eventphase：指定了事件傳播的階段。是一個(gè)數(shù)字。[br] timestamp：事件發(fā)生的時(shí)間。[br] bubbles：指明該事件是否起泡。[br] cancelable：指明該事件是否可以用preventdefault()方法來(lái)取消默認(rèn)的動(dòng)作。[br] preventdefault()方法：取消事件的默認(rèn)動(dòng)作；[br] stoppropagation()方法：停止事件傳播。[br] 2.uievent[br] view：發(fā)生事件的window對(duì)象。[br] detail：提供事件的額外信息，對(duì)于單擊事件、mousedown和mouseup事件都代表的是點(diǎn)擊次數(shù)。[br] 3.mouseevent[br] button：一個(gè)數(shù)字，指明在mousedown、mouseup和單擊事件中，鼠標(biāo)鍵的狀態(tài)，和ie中的button屬性類似，但是數(shù)字代表的意義不一樣，0代表左鍵，1代表中間鍵，2代表右鍵。[br] altkey、ctrlkey、shiftkey、metakey：和ie相同，但是ie沒(méi)有最后一個(gè)。[br] clientx、clienty：和ie的含義相同，但是在dom標(biāo)準(zhǔn)中，這兩個(gè)屬性值都不考慮文檔的滾動(dòng)情況，也就是說(shuō)，無(wú)論文檔滾動(dòng)到哪里，只要事件發(fā)生在窗口左上角，clientx和clienty都是0，所以在ie中，要想得到事件發(fā)生的坐標(biāo)相對(duì)于文檔開(kāi)頭的位置，要加上document.body.scrollleft和document.body.scrolltop。[br] screenx、screeny：鼠標(biāo)指針相對(duì)于顯示器左上角的位置，如果你想打開(kāi)新的窗口，這兩個(gè)屬性很重要。[br] relatedtarget：和ie中的fromelement、toelement類似，除了對(duì)于mouseover和mouseout有意義外，其他的事件沒(méi)什么意義。[br]（三）兼容于兩種主流瀏覽器的拖動(dòng)dom元素的例子[br] 好了，剛才講了這么多dom編程和ie中的事件，那么如何編寫兼容ie和mozilla firefox兩種主流瀏覽器的拖拽程序呢？代碼如下：[br]function begindrag(elementtodrag,event)[br]{[br] var deltax=event.clientx-parseint(elementtodrag.style.left);[br] var deltay=event.clienty-parseint(elementtodrag.style.top);[br][color=#800000] //hgx注：個(gè)人覺(jué)得使用通過(guò)css的left/top屬性來(lái)計(jì)算不是一個(gè)好方法，可以通過(guò)offserleft和offsertop得到。[/color][br]if(document.addeventlistener) [br]{[br] document.addeventlistener("mousemove",movehandler,true);[br] document.addeventlistener("mouseup",uphandler,true);[br]}[br]else if(document.attachevent)[br]{[br] document.attachevent("onmousemove",movehandler);[br] document.attachevent("onmouseup",uphandler);[br] [br]}[br] [br] if(event.stoppropagation) event.stoppropagation();[br] else event.cancelbubble=true;[br] if(event.preventdefault) event.preventdefault();[br] else event.returnvalue=false;[br] [br] function movehandler(e) [br] {[br] if (!e) e=window.event; //如果是ie的事件對(duì)象，那么就用window.event[br] //全局屬性，否則就用dom二級(jí)標(biāo)準(zhǔn)的event對(duì)象。[/p]
[p][color=#800000]//hgx注：也可以這樣：e = e || window.event;[/color][br] elementtodrag.style.left=(event.clientx-deltax)+"px";[br] elementtodrag.style.top=(event.clienty-deltay)+"px";[br] [br] if(event.stoppropagation) event.stoppropagation();[br] else event.cancelbubble=true;[br] [br] }[br] [br] function uphandler([br]e)[br] {[br] if(document.removeeventlistener)[br] {[br] document.removeeventlistener("mouseup",uphandler,true);[br] document.removeeventlistener("mousemove",movehandler,true);}[br] else[br] {[br] document.detachevent("onmouseup",uphandler);[br] document.detachevent("onmousemove",movehandler);}[br] }[br] if(event.stoppropagation) event.stoppropagation();[br] else event.cancelbubble=true;[br] [br] }[/p]
該文章在 2010/4/24 11:24:04 編輯過(guò)
400 186 1886
