javascript 事件處理、鼠標拖動效果實現(xiàn)方法詳解
更新時間：2012年05月11日 16:32:45 作者：
在經(jīng)歷了漫長的時期，終于下定了決心自己寫一個層的拖動。當然了，其它的拖動也是這樣的思路和做法，或者說，這樣的拖動適合所有的可見元素
先看看要拖動的層（模擬窗口）的效果圖吧。
<div id="win">
<div id="win_header"></div>
</div>
一點準備工作：
要讓窗口能自由移動，那么窗口的定位（position）應(yīng)該采用絕對定位（absolute）；
給窗口添加標題欄，這里使用一個放在窗口頂部的層實現(xiàn)，同時將標題欄的鼠標光標設(shè)置為拖動（move）形狀（在chrome中拖動的時候，光標會變成文字光標，松開鼠標鍵后恢復(fù)）。
#win {
position:absolute;
width:480px;
height:320px;
background-color:#d4d4d4;
border: 1px solid #4d4d4d;
}
#win_header {
width:480px;
height:48px;
background-color:#4d4d4d;
cursor:move;
}
定義一個工具函數(shù)，用來獲取指定ID屬性的元素：
function $id(id) {
return document.getElementById(id);
}
定義一個瀏覽器核心標識isIE：
var isIE = (window.navigator.userAgent.indexOf("IE") == -1) ? false : true;
獲取到窗口元素及其標題欄：
var win = $id("win");
var header = $id("win_header");
為了方便記錄鼠標和窗口的位置信息，創(chuàng)建一個位置：
var pos =function(x, y) {
this.x = x;
this.y = y;
};
給窗口設(shè)置一個初始位置（css的left值和top值）。
這里不知道是為什么，如果不使用js設(shè)置這兩個屬性，就取不到值，在CSS中指定了也不行。
var originalpos = new pos(20, 20);
在拖動窗口的過程中，需要記錄的值有：
鼠標按下時鼠標光標的位置
var oldmouse =new pos(0, 0);
鼠標按下時窗口的位置
var oldpos = new pos(0, 0);
鼠標移動時窗口的新的位置
var newpos = new pos(0, 0);
設(shè)置窗口的初始位置
win.style.left = originalpos.x + "px";
win.style.top = originalpos.y + "px";
又是因為瀏覽器的差異（IE和非IE），元素綁定事件處理函數(shù)的方法不同（IE使用attachEvent，非IE使用addEventListener），為了簡化事件綁定的操作，定義一個事件綁定函數(shù)：
function bind(ev, func) {
if(isIE) {
header.attachEvent("on" + ev, func);
} else {
header.addEventListener(ev, func, false);
}
}
在做好這些工作后，就可以開始處理鼠標事件了。
在這個程序中，只希望鼠標左鍵拖動窗口，其它鍵都不能，所以需要判斷是否是鼠標左鍵按下。而這個判斷會在幾個函數(shù)中都使用到，所以提取出來到一個函數(shù)中，通過傳入的參數(shù)（鼠標鍵值，即按下了哪個鍵）判斷。在這里，需要注意瀏覽器間的差異：IE中鼠標左鍵的值是1，而非IE中值是0.
function isLeftButton(btn) {
if(isIE) {
if(btn == 1)
return true;
else
return false;
} else {
if(btn == 0)
return true;
else
return false;
}
}
拖動動作是在按下鼠標左鍵后移動來完成的。把這個動作分享開來，即是鼠標先觸發(fā)了按下動作（mousedown），然后觸發(fā)了移動動作（mousemove）。為了判斷是否是真的在拖動還是只是鼠標從窗口上經(jīng)過，設(shè)置一個變量來記錄鼠標按下的狀態(tài)：
var mousedown = false;
由于CSS中存在的兼容性問題，這里使用js來控制鼠標懸停在窗口標題欄上面的時候的顏色變化。
懸浮
function over(e){
header.style.backgroundColor = "#5d5d5d";
}
離開
function out(e) {
header.style.backgroundColor = "#4d4d4d";
// 有時候鼠標會在未松開的情況下離開窗口，
// 此時通過觸發(fā)鼠標的松開事件來使窗口脫離鼠標的控制
up(e);
}
按下
在按下事件中，需要先判斷是否按下的是鼠標的左鍵；
若是才記錄鼠標和窗口此時的位置，否則不記錄。
function down(e) {
e = e || event;
if(!isLeftButton(e.button))
return;
mousedown = true;
oldmouse.x = e.clientX;
oldmouse.y = e.clientY;
oldpos.x = parseInt(win.style.left.replace("px", ""));
oldpos.y = parseInt(win.style.top.replace("px", ""));
}
松開
function up(e) {
if(!isLeftButton(e.button))
return;
mousedown = false;
}
移動
這里就涉及到鼠標的兩個事件：
按下和移動。當且僅當鼠標左鍵按下時，移動動作才有效。
窗口的新位置，是由鼠標在拖動狀態(tài)下的移動距離（X和Y的距離）決定的。即：
新的鼠標位置送去按下左鍵時記錄下的位置，得到一個距離，然后將窗口的位置加上鼠標移動的距離得到窗口的新位置。
function move(e) {
if(!isLeftButton(e.button))
return;
if(mousedown) {
e =e || event;
newpos.x = e.clientX - oldmouse.x;
newpos.y = e.clientY - oldmouse.y
win.style.left = (oldpos.x + newpos.x) + "px";
win.style.top = (oldpos.y + newpos.y) + "px";
}
}
事件處理都寫好了，最后來給元素綁定上吧，阿門！
bind("mouseover", over);
bind("mouseenter", over);
bind("mouseout", out);
bind("mouseleave", out);
bind("blur", out);
bind("mousedown", down);
bind("mouseup", up);
bind("mousemove", move);
不過在FF中的拖動有問題，只能第一次正常拖動，后面就有點亂了！
要實現(xiàn)的拖動效果：鼠標左鍵在窗口上方的標題欄上按下，同時移動鼠標，窗口跟著移動。
窗口：
復(fù)制代碼 代碼如下:
<div id="win">
<div id="win_header"></div>
</div>
一點準備工作：
要讓窗口能自由移動，那么窗口的定位（position）應(yīng)該采用絕對定位（absolute）；
給窗口添加標題欄，這里使用一個放在窗口頂部的層實現(xiàn)，同時將標題欄的鼠標光標設(shè)置為拖動（move）形狀（在chrome中拖動的時候，光標會變成文字光標，松開鼠標鍵后恢復(fù)）。
復(fù)制代碼 代碼如下:
#win {
position:absolute;
width:480px;
height:320px;
background-color:#d4d4d4;
border: 1px solid #4d4d4d;
}
#win_header {
width:480px;
height:48px;
background-color:#4d4d4d;
cursor:move;
}
定義一個工具函數(shù)，用來獲取指定ID屬性的元素：
復(fù)制代碼 代碼如下:
function $id(id) {
return document.getElementById(id);
}
定義一個瀏覽器核心標識isIE：
var isIE = (window.navigator.userAgent.indexOf("IE") == -1) ? false : true;
獲取到窗口元素及其標題欄：
復(fù)制代碼 代碼如下:
var win = $id("win");
var header = $id("win_header");
為了方便記錄鼠標和窗口的位置信息，創(chuàng)建一個位置：
復(fù)制代碼 代碼如下:
var pos =function(x, y) {
this.x = x;
this.y = y;
};
給窗口設(shè)置一個初始位置（css的left值和top值）。
這里不知道是為什么，如果不使用js設(shè)置這兩個屬性，就取不到值，在CSS中指定了也不行。
復(fù)制代碼 代碼如下:
var originalpos = new pos(20, 20);
在拖動窗口的過程中，需要記錄的值有：
鼠標按下時鼠標光標的位置
復(fù)制代碼 代碼如下:
var oldmouse =new pos(0, 0);
鼠標按下時窗口的位置
var oldpos = new pos(0, 0);
鼠標移動時窗口的新的位置
var newpos = new pos(0, 0);
設(shè)置窗口的初始位置
復(fù)制代碼 代碼如下:
win.style.left = originalpos.x + "px";
win.style.top = originalpos.y + "px";
又是因為瀏覽器的差異（IE和非IE），元素綁定事件處理函數(shù)的方法不同（IE使用attachEvent，非IE使用addEventListener），為了簡化事件綁定的操作，定義一個事件綁定函數(shù)：
復(fù)制代碼 代碼如下:
function bind(ev, func) {
if(isIE) {
header.attachEvent("on" + ev, func);
} else {
header.addEventListener(ev, func, false);
}
}
在做好這些工作后，就可以開始處理鼠標事件了。
在這個程序中，只希望鼠標左鍵拖動窗口，其它鍵都不能，所以需要判斷是否是鼠標左鍵按下。而這個判斷會在幾個函數(shù)中都使用到，所以提取出來到一個函數(shù)中，通過傳入的參數(shù)（鼠標鍵值，即按下了哪個鍵）判斷。在這里，需要注意瀏覽器間的差異：IE中鼠標左鍵的值是1，而非IE中值是0.
復(fù)制代碼 代碼如下:
function isLeftButton(btn) {
if(isIE) {
if(btn == 1)
return true;
else
return false;
} else {
if(btn == 0)
return true;
else
return false;
}
}
拖動動作是在按下鼠標左鍵后移動來完成的。把這個動作分享開來，即是鼠標先觸發(fā)了按下動作（mousedown），然后觸發(fā)了移動動作（mousemove）。為了判斷是否是真的在拖動還是只是鼠標從窗口上經(jīng)過，設(shè)置一個變量來記錄鼠標按下的狀態(tài)：
var mousedown = false;
由于CSS中存在的兼容性問題，這里使用js來控制鼠標懸停在窗口標題欄上面的時候的顏色變化。
懸浮
復(fù)制代碼 代碼如下:
function over(e){
header.style.backgroundColor = "#5d5d5d";
}
離開
復(fù)制代碼 代碼如下:
function out(e) {
header.style.backgroundColor = "#4d4d4d";
// 有時候鼠標會在未松開的情況下離開窗口，
// 此時通過觸發(fā)鼠標的松開事件來使窗口脫離鼠標的控制
up(e);
}
按下
在按下事件中，需要先判斷是否按下的是鼠標的左鍵；
若是才記錄鼠標和窗口此時的位置，否則不記錄。
復(fù)制代碼 代碼如下:
function down(e) {
e = e || event;
if(!isLeftButton(e.button))
return;
mousedown = true;
oldmouse.x = e.clientX;
oldmouse.y = e.clientY;
oldpos.x = parseInt(win.style.left.replace("px", ""));
oldpos.y = parseInt(win.style.top.replace("px", ""));
}
松開
復(fù)制代碼 代碼如下:
function up(e) {
if(!isLeftButton(e.button))
return;
mousedown = false;
}
移動
這里就涉及到鼠標的兩個事件：
按下和移動。當且僅當鼠標左鍵按下時，移動動作才有效。
窗口的新位置，是由鼠標在拖動狀態(tài)下的移動距離（X和Y的距離）決定的。即：
新的鼠標位置送去按下左鍵時記錄下的位置，得到一個距離，然后將窗口的位置加上鼠標移動的距離得到窗口的新位置。
復(fù)制代碼 代碼如下:
function move(e) {
if(!isLeftButton(e.button))
return;
if(mousedown) {
e =e || event;
newpos.x = e.clientX - oldmouse.x;
newpos.y = e.clientY - oldmouse.y
win.style.left = (oldpos.x + newpos.x) + "px";
win.style.top = (oldpos.y + newpos.y) + "px";
}
}
事件處理都寫好了，最后來給元素綁定上吧，阿門！
復(fù)制代碼 代碼如下:
bind("mouseover", over);
bind("mouseenter", over);
bind("mouseout", out);
bind("mouseleave", out);
bind("blur", out);
bind("mousedown", down);
bind("mouseup", up);
bind("mousemove", move);
不過在FF中的拖動有問題，只能第一次正常拖動，后面就有點亂了！
相關(guān)文章
這篇文章主要介紹了JavaScript是如何實現(xiàn)繼承的，有需要的朋友可以參考一下2013-12-12
本文給大家分享的是javascript通過setTimeout實現(xiàn)延時顯示提示框的特效代碼，效果非常棒，這里推薦給大家2016-04-04
個人總結(jié)的一些JavaScript技巧、實用函數(shù)、簡潔方法、編程細節(jié)
這篇文章主要介紹了個人總結(jié)的一些JavaScript技巧、實用函數(shù)、簡潔方法、編程細節(jié),本文講解了變量轉(zhuǎn)換、取整同時轉(zhuǎn)換成數(shù)值型、日期轉(zhuǎn)數(shù)值、類數(shù)組對象轉(zhuǎn)數(shù)組、進制之間的轉(zhuǎn)換等方法技巧,需要的朋友可以參考下2015-06-06
本篇文章主要介紹了Webpack實戰(zhàn)加載SVG的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了async與await異步編程,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
我們在開發(fā)中常遇到一種情況,在創(chuàng)建一個元素之后,需要給它綁定事件,這篇文章主要給大家介紹了關(guān)于js為新添加元素添加綁定事件的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Javascript模擬實現(xiàn)new原理解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-03-03
JavaScript對象就是一組屬性（方法）的集合 在該語言中如果變量名或方法名不符合聲明規(guī)范，則一定得用方括號“ [] ”引用它2010-12-12
這篇文章主要介紹了js 計數(shù)排序的實現(xiàn)示例(升級版),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
這篇文章主要介紹了Javascript原型鏈的原理,結(jié)合實例形式深入分析了JavaScript原型鏈的原理與使用技巧,需要的朋友可以參考下2016-01-01