在很多語言的學習中,“事件”都是一個比較難理解,但是又是一個很重要的概念。JavaScript中的事件處理也是一樣,正因為有了事件處理,才會出現Ajax拖動的效果。本文就討論一下JavaScript中的事件處理,讀過之后,您就會知道,很多Ajax框架實現拖動效果的原理了。
一、 IE Event對象
(一)IE Event對象的主要屬性和方法
在IE中有一個專門負責事件處理的對象Event,這個對象負責對事件的處理,含有很多的屬性和方法,通過這些方法和屬性的調用,就能完成很多的事件處理。
type:事件的類型,就是HTML標簽屬性中,沒有“on”前綴之后的字符串,例如“Click”就代表單擊事件。
srcElement:事件源,就是發生事件的元素。
button:聲明了被按下的鼠標鍵,是一個整數。1代表鼠標左鍵,2代表鼠標右鍵,4代表鼠標的中間鍵,如果按下了多個鼠標鍵,就把這些值加在一起,所以3就代表左右鍵同時按下。
clientX/clientY:是指事件發生的時候,鼠標的橫、縱坐標,返回的是整數,它們的值是相對于包容窗口的左上角生成的。
offsetX/offsetY:鼠標指針相對于源元素的位置,可以確定單擊Image對象的哪個象素。
altKey,ctrlKey,shiftKey:顧名思義,這些屬性是指鼠標事件發生的時候,是否同時按住了Alt、Ctrl或者Shift鍵,返回的是一個布爾值。
keyCode:返回keydown和keyup事件發生的時候,按鍵的代碼以及keypress事件的Unicode字符。
fromElement、toElement前者是指代mouseover事件移動過的文檔元素,后者指代mouseout事件中鼠標移動到的文檔元素。
cancelBubble:一個布爾屬性,把它設置為true的時候,將停止事件進一步起泡到包容層次的元素。
returnValue:一個布爾值屬性,設置為false的時候可以組織瀏覽器執行默認的事件動作,相當于<a href=”#” onclick=”ProcessMethod();return false;” />。
attachEvent()和detachEvent()方法:為制定DOM對象事件類型注冊多個事件處理函數的方法,它們有兩個參數,第一個是事件類型,第二個是事件處理函數。在attachEvent()事件執行的時候,this關鍵字指向的是window對象,而不是發生事件的那個元素。
(二)IE Event對象的一些說明
1.IE Event對象是一個全局屬性
在IE中,不能把Event對象作為參數傳遞給事件處理程序,只能用window.event或者event來引用Event對象。因為在IE中,Event是window的一個屬性,也就是說event是一個全局變量,這個變量提供了事件的細節。
2.IE中事件的起泡:IE中事件可以沿著包容層次一點點起泡到上層,也就是說,下層的DOM節點定義的事件處理函數,到了上層的節點如果還有和下層相同事件類型的事件處理函數,那么上層的事件處理函數也會執行。例如,<div>標簽包含了<a>,如果這兩個標簽都有onclick事件的處理函數,那么執行的情況就是先執行<a>標簽的onclick事件處理函數,再執行<div>的事件處理函數。如果希望<a>的事件處理函數執行完畢之后,不希望執行上層的<div>的onclick的事件處理函數了,那么就把cancelBubble設置為false即可。
二、 IE中拖動DOM元素的例子
/*
該函數由mousedown事件處理調用
它為隨后發生的mousemove和mouseup事件注冊了臨時的捕捉事件處理程序
并用這些事件處理程序拖動指定的文檔元素
第二個參數必須是mousedown事件的事件對象
*/
function beginDrag(elementToDrag,event)
{
//該元素當前位于何處
//該元素的樣式性質必須具有left和top css屬性
//此外,我們假定他們用象素做單位
//var x=parseInt(elementToDrag.style.left);
//var y=parseInt(elementToDrag.style.top);
//計算一個點和鼠標點擊之間的距離,下面的嵌套的moveHandler函數需要這些值
var deltaX=event.clientX-parseInt(elementToDrag.style.left);
var deltaY=event.clientY-parseInt(elementToDrag.style.top);
// 注冊mousedown事件后發生的mousemove和mouseup事件的處理程序
// 注意,它們被注冊為文檔的捕捉事件處理程序
// 在鼠標按鈕保持按下的狀態的時候,這些事件處理程序保持活動的狀態
// 在按鈕被釋放的時候,它們被刪除
document.attachEvent("onmousemove",moveHandler);
document.attachEvent("onmouseup",upHandler);
//我們已經處理了該事件,不要讓別的元素看到它
event.cancelBubble=true;
event.returnValue=false;
/*
這是在元素被拖動時候捕捉mousemove事件的處理程序,它響應移動的元素
*/
function moveHandler(e)
{
//把元素移動到當前的鼠標位置
e=window.event;
elementToDrag.style.left=(event.clientX-deltaX)+"px";
elementToDrag.style.top=(event.clientY-deltaY)+"px";
//不要讓別的元素看到該事件
event.cancelBubble=true;
}
/*
該事件將捕捉拖動結束的時候發生的mouseup事件
*/
function upHandler(e)
{
//注銷事件處理程序
document.detachEvent("onmouseup",upHandler);
document.detachEvent("onmousemove",moveHandler);}
event.cancelBubble=true;
}
調用它的HTML文件代碼:
<html>
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="dragIE.js"></script>
</head>
<body>
<div style="position:absolute;left:100px;top:100px;background-color:White;border:solid black;">
<div style="background-color:Gray;border-bottom:solid black;padding:3px;font-family:Sans-Serif;font-weight:bold;" onmousedown="beginDrag(this.parentNode,event);">
拖動我
</div>
<div>
<p>This is a test.Testing,testing</p></div>
</div>
</body>
三、 DOM中的高級事件處理
IE 6中的事件處理,并不是W3C DOM標準的事件處理模型,所以如果上述代碼運行在Mozilla Firefox的瀏覽器中,就會失去作用,同時即將發布的IE 7也將支持W3C DOM的二級標準,所以掌握DOM的高級事件處理顯得就很重要了,因為W3C DOM二級標準是未來Web的發展方向,同時W3C DOM的API非常常用,為未來更加復雜的Web開發提供了良好的基礎。
(一)事件處理程序的作用域和事件的傳播
在正式討論DOM高級事件處理之前,我們有必要了解一下事件處理程序的作用域。事件處理程序的作用域要比普通的函數作用域復雜很多。普通的函數作用域鏈比較容易,例如在一個普通函數中查找一個變量a,那么JavaScript解釋器會先在該函數的調用對象中查找是否有a這個變量,如果沒有,將會在作用域鏈的下一個對象,一般是全局對象中查找。但是事件處理程序沒這么簡單,特別是用HTML的屬性定義的,它們的作用域鏈的頭部是調用它們的對象,而下一個對象并不是全局對象,而是觸發事件處理程序的對象。這樣就會出現一個問題,window和document都有一個方法open(),如果open()前面不加修飾,那么在事件處理的函數中將會調用document.open()方法,而不是常用的window.open()方法,所以使用的時候應該明確指明是window.open()。
(二)事件傳播和注冊事件處理程序
1.事件傳播
在二級DOM標準中,事件處理程序比較復雜,當事件發生的時候,目標節點的事件處理程序就會被觸發執行,但是目標節點的父節點也有機會來處理這個事件。事件的傳播分為三個階段,首先是捕捉階段,事件從Document對象沿著DOM樹向下傳播到目標節點,如果目標的任何一個父節點注冊了捕捉事件的處理程序,那么事件在傳播的過程中就會首先運行這個程序。下一個階段就是發生在目標節點自身了,注冊在目標節點上的相應的事件處理程序就會執行;最后是起泡階段,事件將從目標節點向上傳回給父節點,同樣,如果父節點有相應的事件處理程序也會處理。在IE中,沒有捕捉的階段,但是有起泡的階段。可以用stopPropagating()方法來停止事件傳播,也就是讓其他元素對這個事件不可見,在IE 6中,就是把cancelBubble設置為true。
2.注冊事件處理程序
和IE一樣,DOM標準也有自己的事件處理程序,不過DOM二級標準的事件處理程序比IE的強大一些,事件處理程序的注冊用addEventListner方法,該方法有三個參數,第一個是事件類型,第二個是處理的函數,第三個是一個布爾值,true表示制定的事件處理程序將在事件傳播的階段用于捕捉事件,否則就不捕捉,當事件發生在對象上才觸發執行這個事件處理的函數,或者發生在該對象的字節點上,并且向上起泡到這個對象上的時候,觸發執行這個事件處理的函數。例如:document.addEventListener("mousemove",moveHandler,true);就是在mousemove事件發生的時候,調用moveHandler函數,并且可以捕捉事件。
可以用addEventListener為一個事件注冊多個事件處理的程序,但是這些函數的執行順序是不確定,并不像C#那樣按照注冊的順序執行。
在Mozilla Firefox中用addEventListener注冊一個事件處理程序的時候,this關鍵字就表示調用事件處理程序的文檔元素,但是其他瀏覽器并不一定是這樣,因為這不是DOM標準,正確的做法是用currentTarget屬性來引用調用事件處理程序的文檔元素。
3.二級DOM標準中的Event
和IE不同的是,W3C DOM中的Event對象并不是window全局對象下面的屬性,換句話說,event不是全局變量。通常在DOM二級標準中,event作為發生事件的文檔對象的屬性。Event含有兩個子接口,分別是UIEvent和MutationEvent,這兩個子接口實現了Event的所有方法和屬性,而MouseEvent接口又是UIEvent的子接口,所以實現了UIEvent和Event的所有方法和屬性。下面,我們就看看Event、UIEvent和MouseEvent的主要屬性和方法。
1.Event
type:事件類型,和IE類似,但是沒有“on”前綴,例如單擊事件只是“click”。
target:發生事件的節點。
currentTarget:發生當前正在處理的事件的節點,可能是Target屬性所指向的節點,也可能由于捕捉或者起泡,指向Target所指節點的父節點。
eventPhase:指定了事件傳播的階段。是一個數字。
timeStamp:事件發生的時間。
bubbles:指明該事件是否起泡。
cancelable:指明該事件是否可以用preventDefault()方法來取消默認的動作。
preventDefault()方法:取消事件的默認動作;
stopPropagation()方法:停止事件傳播。
2.UIEvent
view:發生事件的window對象。
detail:提供事件的額外信息,對于單擊事件、mousedown和mouseup事件都代表的是點擊次數。
3.MouseEvent
button:一個數字,指明在mousedown、mouseup和單擊事件中,鼠標鍵的狀態,和IE中的button屬性類似,但是數字代表的意義不一樣,0代表左鍵,1代表中間鍵,2代表右鍵。
altKey、ctrlKey、shiftKey、metaKey:和IE相同,但是IE沒有最后一個。
clientX、clientY:和IE的含義相同,但是在DOM標準中,這兩個屬性值都不考慮文檔的滾動情況,也就是說,無論文檔滾動到哪里,只要事件發生在窗口左上角,clientX和clientY都是0,所以在IE中,要想得到事件發生的坐標相對于文檔開頭的位置,要加上document.body.scrollLeft和document.body.scrollTop。
screenX、screenY:鼠標指針相對于顯示器左上角的位置,如果你想打開新的窗口,這兩個屬性很重要。
relatedTarget:和IE中的fromElement、toElement類似,除了對于mouseover和mouseout有意義外,其他的事件沒什么意義。
(三)兼容于兩種主流瀏覽器的拖動DOM元素的例子
好了,剛才講了這么多DOM編程和IE中的事件,那么如何編寫兼容IE和Mozilla Firefox兩種主流瀏覽器的拖拽程序呢?代碼如下:
function beginDrag(elementToDrag,event)
{
var deltaX=event.clientX-parseInt(elementToDrag.style.left);
var deltaY=event.clientY-parseInt(elementToDrag.style.top);
if(document.addEventListener)
{
document.addEventListener("mousemove",moveHandler,true);
document.addEventListener("mouseup",upHandler,true);
}
else if(document.attachEvent)
{
document.attachEvent("onmousemove",moveHandler);
document.attachEvent("onmouseup",upHandler);
}
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble=true;
if(event.preventDefault) event.preventDefault();
else event.returnValue=false;
function moveHandler(e)
{
if (!e) e=window.event; //如果是IE的事件對象,那么就用window.event
//全局屬性,否則就用DOM二級標準的Event對象。
elementToDrag.style.left=(event.clientX-deltaX)+"px";
elementToDrag.style.top=(event.clientY-deltaY)+"px";
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble=true;
}
function upHandler(e)
{
if(document.removeEventListener)
{
document.removeEventListener("mouseup",upHandler,true);
document.removeEventListener("mousemove",moveHandler,true);}
else
{
document.detachEvent("onmouseup",upHandler);
document.detachEvent("onmousemove",moveHandler);}
}
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble=true;
}
一、 IE Event對象
(一)IE Event對象的主要屬性和方法
在IE中有一個專門負責事件處理的對象Event,這個對象負責對事件的處理,含有很多的屬性和方法,通過這些方法和屬性的調用,就能完成很多的事件處理。
type:事件的類型,就是HTML標簽屬性中,沒有“on”前綴之后的字符串,例如“Click”就代表單擊事件。
srcElement:事件源,就是發生事件的元素。
button:聲明了被按下的鼠標鍵,是一個整數。1代表鼠標左鍵,2代表鼠標右鍵,4代表鼠標的中間鍵,如果按下了多個鼠標鍵,就把這些值加在一起,所以3就代表左右鍵同時按下。
clientX/clientY:是指事件發生的時候,鼠標的橫、縱坐標,返回的是整數,它們的值是相對于包容窗口的左上角生成的。
offsetX/offsetY:鼠標指針相對于源元素的位置,可以確定單擊Image對象的哪個象素。
altKey,ctrlKey,shiftKey:顧名思義,這些屬性是指鼠標事件發生的時候,是否同時按住了Alt、Ctrl或者Shift鍵,返回的是一個布爾值。
keyCode:返回keydown和keyup事件發生的時候,按鍵的代碼以及keypress事件的Unicode字符。
fromElement、toElement前者是指代mouseover事件移動過的文檔元素,后者指代mouseout事件中鼠標移動到的文檔元素。
cancelBubble:一個布爾屬性,把它設置為true的時候,將停止事件進一步起泡到包容層次的元素。
returnValue:一個布爾值屬性,設置為false的時候可以組織瀏覽器執行默認的事件動作,相當于<a href=”#” onclick=”ProcessMethod();return false;” />。
attachEvent()和detachEvent()方法:為制定DOM對象事件類型注冊多個事件處理函數的方法,它們有兩個參數,第一個是事件類型,第二個是事件處理函數。在attachEvent()事件執行的時候,this關鍵字指向的是window對象,而不是發生事件的那個元素。
(二)IE Event對象的一些說明
1.IE Event對象是一個全局屬性
在IE中,不能把Event對象作為參數傳遞給事件處理程序,只能用window.event或者event來引用Event對象。因為在IE中,Event是window的一個屬性,也就是說event是一個全局變量,這個變量提供了事件的細節。
2.IE中事件的起泡:IE中事件可以沿著包容層次一點點起泡到上層,也就是說,下層的DOM節點定義的事件處理函數,到了上層的節點如果還有和下層相同事件類型的事件處理函數,那么上層的事件處理函數也會執行。例如,<div>標簽包含了<a>,如果這兩個標簽都有onclick事件的處理函數,那么執行的情況就是先執行<a>標簽的onclick事件處理函數,再執行<div>的事件處理函數。如果希望<a>的事件處理函數執行完畢之后,不希望執行上層的<div>的onclick的事件處理函數了,那么就把cancelBubble設置為false即可。
二、 IE中拖動DOM元素的例子
/*
該函數由mousedown事件處理調用
它為隨后發生的mousemove和mouseup事件注冊了臨時的捕捉事件處理程序
并用這些事件處理程序拖動指定的文檔元素
第二個參數必須是mousedown事件的事件對象
*/
function beginDrag(elementToDrag,event)
{
//該元素當前位于何處
//該元素的樣式性質必須具有left和top css屬性
//此外,我們假定他們用象素做單位
//var x=parseInt(elementToDrag.style.left);
//var y=parseInt(elementToDrag.style.top);
//計算一個點和鼠標點擊之間的距離,下面的嵌套的moveHandler函數需要這些值
var deltaX=event.clientX-parseInt(elementToDrag.style.left);
var deltaY=event.clientY-parseInt(elementToDrag.style.top);
// 注冊mousedown事件后發生的mousemove和mouseup事件的處理程序
// 注意,它們被注冊為文檔的捕捉事件處理程序
// 在鼠標按鈕保持按下的狀態的時候,這些事件處理程序保持活動的狀態
// 在按鈕被釋放的時候,它們被刪除
document.attachEvent("onmousemove",moveHandler);
document.attachEvent("onmouseup",upHandler);
//我們已經處理了該事件,不要讓別的元素看到它
event.cancelBubble=true;
event.returnValue=false;
/*
這是在元素被拖動時候捕捉mousemove事件的處理程序,它響應移動的元素
*/
function moveHandler(e)
{
//把元素移動到當前的鼠標位置
e=window.event;
elementToDrag.style.left=(event.clientX-deltaX)+"px";
elementToDrag.style.top=(event.clientY-deltaY)+"px";
//不要讓別的元素看到該事件
event.cancelBubble=true;
}
/*
該事件將捕捉拖動結束的時候發生的mouseup事件
*/
function upHandler(e)
{
//注銷事件處理程序
document.detachEvent("onmouseup",upHandler);
document.detachEvent("onmousemove",moveHandler);}
event.cancelBubble=true;
}
調用它的HTML文件代碼:
<html>
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="dragIE.js"></script>
</head>
<body>
<div style="position:absolute;left:100px;top:100px;background-color:White;border:solid black;">
<div style="background-color:Gray;border-bottom:solid black;padding:3px;font-family:Sans-Serif;font-weight:bold;" onmousedown="beginDrag(this.parentNode,event);">
拖動我
</div>
<div>
<p>This is a test.Testing,testing</p></div>
</div>
</body>
三、 DOM中的高級事件處理
IE 6中的事件處理,并不是W3C DOM標準的事件處理模型,所以如果上述代碼運行在Mozilla Firefox的瀏覽器中,就會失去作用,同時即將發布的IE 7也將支持W3C DOM的二級標準,所以掌握DOM的高級事件處理顯得就很重要了,因為W3C DOM二級標準是未來Web的發展方向,同時W3C DOM的API非常常用,為未來更加復雜的Web開發提供了良好的基礎。
(一)事件處理程序的作用域和事件的傳播
在正式討論DOM高級事件處理之前,我們有必要了解一下事件處理程序的作用域。事件處理程序的作用域要比普通的函數作用域復雜很多。普通的函數作用域鏈比較容易,例如在一個普通函數中查找一個變量a,那么JavaScript解釋器會先在該函數的調用對象中查找是否有a這個變量,如果沒有,將會在作用域鏈的下一個對象,一般是全局對象中查找。但是事件處理程序沒這么簡單,特別是用HTML的屬性定義的,它們的作用域鏈的頭部是調用它們的對象,而下一個對象并不是全局對象,而是觸發事件處理程序的對象。這樣就會出現一個問題,window和document都有一個方法open(),如果open()前面不加修飾,那么在事件處理的函數中將會調用document.open()方法,而不是常用的window.open()方法,所以使用的時候應該明確指明是window.open()。
(二)事件傳播和注冊事件處理程序
1.事件傳播
在二級DOM標準中,事件處理程序比較復雜,當事件發生的時候,目標節點的事件處理程序就會被觸發執行,但是目標節點的父節點也有機會來處理這個事件。事件的傳播分為三個階段,首先是捕捉階段,事件從Document對象沿著DOM樹向下傳播到目標節點,如果目標的任何一個父節點注冊了捕捉事件的處理程序,那么事件在傳播的過程中就會首先運行這個程序。下一個階段就是發生在目標節點自身了,注冊在目標節點上的相應的事件處理程序就會執行;最后是起泡階段,事件將從目標節點向上傳回給父節點,同樣,如果父節點有相應的事件處理程序也會處理。在IE中,沒有捕捉的階段,但是有起泡的階段。可以用stopPropagating()方法來停止事件傳播,也就是讓其他元素對這個事件不可見,在IE 6中,就是把cancelBubble設置為true。
2.注冊事件處理程序
和IE一樣,DOM標準也有自己的事件處理程序,不過DOM二級標準的事件處理程序比IE的強大一些,事件處理程序的注冊用addEventListner方法,該方法有三個參數,第一個是事件類型,第二個是處理的函數,第三個是一個布爾值,true表示制定的事件處理程序將在事件傳播的階段用于捕捉事件,否則就不捕捉,當事件發生在對象上才觸發執行這個事件處理的函數,或者發生在該對象的字節點上,并且向上起泡到這個對象上的時候,觸發執行這個事件處理的函數。例如:document.addEventListener("mousemove",moveHandler,true);就是在mousemove事件發生的時候,調用moveHandler函數,并且可以捕捉事件。
可以用addEventListener為一個事件注冊多個事件處理的程序,但是這些函數的執行順序是不確定,并不像C#那樣按照注冊的順序執行。
在Mozilla Firefox中用addEventListener注冊一個事件處理程序的時候,this關鍵字就表示調用事件處理程序的文檔元素,但是其他瀏覽器并不一定是這樣,因為這不是DOM標準,正確的做法是用currentTarget屬性來引用調用事件處理程序的文檔元素。
3.二級DOM標準中的Event
和IE不同的是,W3C DOM中的Event對象并不是window全局對象下面的屬性,換句話說,event不是全局變量。通常在DOM二級標準中,event作為發生事件的文檔對象的屬性。Event含有兩個子接口,分別是UIEvent和MutationEvent,這兩個子接口實現了Event的所有方法和屬性,而MouseEvent接口又是UIEvent的子接口,所以實現了UIEvent和Event的所有方法和屬性。下面,我們就看看Event、UIEvent和MouseEvent的主要屬性和方法。
1.Event
type:事件類型,和IE類似,但是沒有“on”前綴,例如單擊事件只是“click”。
target:發生事件的節點。
currentTarget:發生當前正在處理的事件的節點,可能是Target屬性所指向的節點,也可能由于捕捉或者起泡,指向Target所指節點的父節點。
eventPhase:指定了事件傳播的階段。是一個數字。
timeStamp:事件發生的時間。
bubbles:指明該事件是否起泡。
cancelable:指明該事件是否可以用preventDefault()方法來取消默認的動作。
preventDefault()方法:取消事件的默認動作;
stopPropagation()方法:停止事件傳播。
2.UIEvent
view:發生事件的window對象。
detail:提供事件的額外信息,對于單擊事件、mousedown和mouseup事件都代表的是點擊次數。
3.MouseEvent
button:一個數字,指明在mousedown、mouseup和單擊事件中,鼠標鍵的狀態,和IE中的button屬性類似,但是數字代表的意義不一樣,0代表左鍵,1代表中間鍵,2代表右鍵。
altKey、ctrlKey、shiftKey、metaKey:和IE相同,但是IE沒有最后一個。
clientX、clientY:和IE的含義相同,但是在DOM標準中,這兩個屬性值都不考慮文檔的滾動情況,也就是說,無論文檔滾動到哪里,只要事件發生在窗口左上角,clientX和clientY都是0,所以在IE中,要想得到事件發生的坐標相對于文檔開頭的位置,要加上document.body.scrollLeft和document.body.scrollTop。
screenX、screenY:鼠標指針相對于顯示器左上角的位置,如果你想打開新的窗口,這兩個屬性很重要。
relatedTarget:和IE中的fromElement、toElement類似,除了對于mouseover和mouseout有意義外,其他的事件沒什么意義。
(三)兼容于兩種主流瀏覽器的拖動DOM元素的例子
好了,剛才講了這么多DOM編程和IE中的事件,那么如何編寫兼容IE和Mozilla Firefox兩種主流瀏覽器的拖拽程序呢?代碼如下:
function beginDrag(elementToDrag,event)
{
var deltaX=event.clientX-parseInt(elementToDrag.style.left);
var deltaY=event.clientY-parseInt(elementToDrag.style.top);
if(document.addEventListener)
{
document.addEventListener("mousemove",moveHandler,true);
document.addEventListener("mouseup",upHandler,true);
}
else if(document.attachEvent)
{
document.attachEvent("onmousemove",moveHandler);
document.attachEvent("onmouseup",upHandler);
}
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble=true;
if(event.preventDefault) event.preventDefault();
else event.returnValue=false;
function moveHandler(e)
{
if (!e) e=window.event; //如果是IE的事件對象,那么就用window.event
//全局屬性,否則就用DOM二級標準的Event對象。
elementToDrag.style.left=(event.clientX-deltaX)+"px";
elementToDrag.style.top=(event.clientY-deltaY)+"px";
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble=true;
}
function upHandler(e)
{
if(document.removeEventListener)
{
document.removeEventListener("mouseup",upHandler,true);
document.removeEventListener("mousemove",moveHandler,true);}
else
{
document.detachEvent("onmouseup",upHandler);
document.detachEvent("onmousemove",moveHandler);}
}
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble=true;
}
标签:事件
推薦設計
優秀海報設計精選集(8)海報設計2022-09-23
充滿自然光線!32平米精致裝修設計2022-08-14
親愛的圖書館 | VERSE雜誌版版式設計2022-07-11
生活,就該這麼愛!2022天海報設計2022-06-02
最新文章
實現DIV圓角的JavaScript代碼Javascript教程2007-02-19
JS函數實現鼠標指向圖片后Javascript教程2007-10-28
JavaScript基本數據結構Javascript教程2007-10-08
名詞解釋:JavaScript、JscriJavascript教程2007-10-06