最近在搞VML的東東。做了一個簡單的在HTML頁面上畫出流程圖的功能。
既然是畫圖，就肯定遇到在頁面上拖動圖畫元素的功能。這個大家都會覺得很簡單了，無非就是mousedown, mousemove, mouseup這些事件的組合了。但是如果只是這么簡單的編寫代碼的話，當頁面上元素都有自己的mousedown, mousemove, mouseup時，在拖動的時候就會受到干擾。根據原來開發VB程序的經驗，我覺得應該有一種方式能夠將事件暫時鎖定到一個對象。翻翻資料，看到了兩個方法：setCapture和releaseCapture，哈哈，和Win32 API的函數名稱都一樣。setCapture函數的作用就是將后續的mouse事件都發送給這個對象，releaseCapture就是將鼠標事件還回去，由document、window、object之類的自行來處理，這樣就保證了在拖動的過程中，不會由于經過了其它的元素而受到干擾。另外，還有一個很重要的事情是，在Win32上，mouse move的事件不是一個連續的，也就是說，并不是我們每次移動1px的鼠標指針，就會發生一個mousemove，windows會周期性檢查mouse的位置變化來產生mousemove的事件。所以，如果是一個很小的頁面對象，比如一個直徑5px的圓點，如果沒有setCapture和releaseCapture，那么在鼠標按住之后，快速的移動鼠標，就有可能鼠標移動走了，但是小圓點還在原地，就是因為下一次的mousemove事件已經不再發給這個圓點對象了。
簡單的代碼如下（WindowsXP SP2 + IE 6 測試）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>HTML Mouse Drag Move</title>
<script language="javascript">
// 全局變量，記錄鼠標指針的上一次位置
var g_x;
var g_y;
function mymousedown(theObj) {
if (event.button == 1) {
g_x = event.clientX;
g_y = event.clientY;
theObj.style.cursor = "move";
//鎖定鼠標事件
theObj.setCapture();
}
return true;
}
function mymousemove(theObj) {
if (event.button == 1) {
//計算鼠標指針的移動量
var deltaX = event.clientX - g_x;
var deltaY = event.clientY - g_y;
g_x = event.clientX;
g_y = event.clientY;
theObj.style.pixelLeft += deltaX;
theObj.style.pixelTop += deltaY;
}
return true;
}
function mymouseup(theObj) {
if (event.button == 1) {
//放開鼠標事件
theObj.releaseCapture();
theObj.style.cursor="default";
}
return true;
}
//在寫JavaScript代碼時，我通常加入一個文本區域來進行調試
function debugInfo(info) {
var debugWindow = document.getElementById("debug_window");
debugWindow.value = debugWindow.value + "\r\n" + info;
}
</script>
</head>
<body>
<div id="div1" style="border:1px solid black; position:absolute; top:10; left:10; width:100; height:100; background:red"
onmousedown="mymousedown(this)"
onmousemove="mymousemove(this)"
onmouseup="mymouseup(this)">
Hello world!
</div>
<br><br><br><br><br><br>
<textarea id="debug_window" name="textarea" cols="50" rows="20"></textarea>
</body>
</html>
注：要移動的對象的style中position屬性一定要指定為absolute或者relative，因為position屬性默認是static，在這種情況下，對象的left和top屬性會被CSS解釋器忽略。
另外，在網上看到有同仁說：
Mozilla 也有類似的功能，方法稍微不同
window.captureEvents(Event.eventType)
window.releaseEvents(Event.eventType)
Event 是Mozilla特殊的一個object.
eventType 包括: Abort, Blur, Click, Change, DblClick, DragDrop, Error, Focus, KeyDown, KeyPress, KeyUp, Load, MouseDown
如果要在Mozilla中兼容，就需要進行不同的處理了。
posted on 2008-04-16 15:32
YODA 閱讀(3807)
評論(0) 編輯 收藏