javascript 事件處理、鼠標(biāo)拖動(dòng)效果實(shí)現(xiàn)方法詳解
更新時(shí)間：2012年05月11日 16:32:45 作者：
在經(jīng)歷了漫長(zhǎng)的時(shí)期，終于下定了決心自己寫一個(gè)層的拖動(dòng)。當(dāng)然了，其它的拖動(dòng)也是這樣的思路和做法，或者說，這樣的拖動(dòng)適合所有的可見元素
先看看要拖動(dòng)的層（模擬窗口）的效果圖吧。
<div id="win">
<div id="win_header"></div>
</div>
一點(diǎn)準(zhǔn)備工作：
要讓窗口能自由移動(dòng)，那么窗口的定位（position）應(yīng)該采用絕對(duì)定位（absolute）；
給窗口添加標(biāo)題欄，這里使用一個(gè)放在窗口頂部的層實(shí)現(xiàn)，同時(shí)將標(biāo)題欄的鼠標(biāo)光標(biāo)設(shè)置為拖動(dòng)（move）形狀（在chrome中拖動(dòng)的時(shí)候，光標(biāo)會(huì)變成文字光標(biāo)，松開鼠標(biāo)鍵后恢復(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;
}
定義一個(gè)工具函數(shù)，用來獲取指定ID屬性的元素：
function $id(id) {
return document.getElementById(id);
}
定義一個(gè)瀏覽器核心標(biāo)識(shí)isIE：
var isIE = (window.navigator.userAgent.indexOf("IE") == -1) ? false : true;
獲取到窗口元素及其標(biāo)題欄：
var win = $id("win");
var header = $id("win_header");
為了方便記錄鼠標(biāo)和窗口的位置信息，創(chuàng)建一個(gè)位置：
var pos =function(x, y) {
this.x = x;
this.y = y;
};
給窗口設(shè)置一個(gè)初始位置（css的left值和top值）。
這里不知道是為什么，如果不使用js設(shè)置這兩個(gè)屬性，就取不到值，在CSS中指定了也不行。
var originalpos = new pos(20, 20);
在拖動(dòng)窗口的過程中，需要記錄的值有：
鼠標(biāo)按下時(shí)鼠標(biāo)光標(biāo)的位置
var oldmouse =new pos(0, 0);
鼠標(biāo)按下時(shí)窗口的位置
var oldpos = new pos(0, 0);
鼠標(biāo)移動(dòng)時(shí)窗口的新的位置
var newpos = new pos(0, 0);
設(shè)置窗口的初始位置
win.style.left = originalpos.x + "px";
win.style.top = originalpos.y + "px";
又是因?yàn)闉g覽器的差異（IE和非IE），元素綁定事件處理函數(shù)的方法不同（IE使用attachEvent，非IE使用addEventListener），為了簡(jiǎn)化事件綁定的操作，定義一個(gè)事件綁定函數(shù)：
function bind(ev, func) {
if(isIE) {
header.attachEvent("on" + ev, func);
} else {
header.addEventListener(ev, func, false);
}
}
在做好這些工作后，就可以開始處理鼠標(biāo)事件了。
在這個(gè)程序中，只希望鼠標(biāo)左鍵拖動(dòng)窗口，其它鍵都不能，所以需要判斷是否是鼠標(biāo)左鍵按下。而這個(gè)判斷會(huì)在幾個(gè)函數(shù)中都使用到，所以提取出來到一個(gè)函數(shù)中，通過傳入的參數(shù)（鼠標(biāo)鍵值，即按下了哪個(gè)鍵）判斷。在這里，需要注意瀏覽器間的差異：IE中鼠標(biāo)左鍵的值是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;
}
}
拖動(dòng)動(dòng)作是在按下鼠標(biāo)左鍵后移動(dòng)來完成的。把這個(gè)動(dòng)作分享開來，即是鼠標(biāo)先觸發(fā)了按下動(dòng)作（mousedown），然后觸發(fā)了移動(dòng)動(dòng)作（mousemove）。為了判斷是否是真的在拖動(dòng)還是只是鼠標(biāo)從窗口上經(jīng)過，設(shè)置一個(gè)變量來記錄鼠標(biāo)按下的狀態(tài)：
var mousedown = false;
由于CSS中存在的兼容性問題，這里使用js來控制鼠標(biāo)懸停在窗口標(biāo)題欄上面的時(shí)候的顏色變化。
懸浮
function over(e){
header.style.backgroundColor = "#5d5d5d";
}
離開
function out(e) {
header.style.backgroundColor = "#4d4d4d";
// 有時(shí)候鼠標(biāo)會(huì)在未松開的情況下離開窗口，
// 此時(shí)通過觸發(fā)鼠標(biāo)的松開事件來使窗口脫離鼠標(biāo)的控制
up(e);
}
按下
在按下事件中，需要先判斷是否按下的是鼠標(biāo)的左鍵；
若是才記錄鼠標(biāo)和窗口此時(shí)的位置，否則不記錄。
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;
}
移動(dòng)
這里就涉及到鼠標(biāo)的兩個(gè)事件：
按下和移動(dòng)。當(dāng)且僅當(dāng)鼠標(biāo)左鍵按下時(shí)，移動(dòng)動(dòng)作才有效。
窗口的新位置，是由鼠標(biāo)在拖動(dòng)狀態(tài)下的移動(dòng)距離（X和Y的距離）決定的。即：
新的鼠標(biāo)位置送去按下左鍵時(shí)記錄下的位置，得到一個(gè)距離，然后將窗口的位置加上鼠標(biāo)移動(dòng)的距離得到窗口的新位置。
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中的拖動(dòng)有問題，只能第一次正常拖動(dòng)，后面就有點(diǎn)亂了！
要實(shí)現(xiàn)的拖動(dòng)效果：鼠標(biāo)左鍵在窗口上方的標(biāo)題欄上按下，同時(shí)移動(dòng)鼠標(biāo)，窗口跟著移動(dòng)。
窗口：
復(fù)制代碼 代碼如下:
<div id="win">
<div id="win_header"></div>
</div>
一點(diǎn)準(zhǔn)備工作：
要讓窗口能自由移動(dòng)，那么窗口的定位（position）應(yīng)該采用絕對(duì)定位（absolute）；
給窗口添加標(biāo)題欄，這里使用一個(gè)放在窗口頂部的層實(shí)現(xiàn)，同時(shí)將標(biāo)題欄的鼠標(biāo)光標(biāo)設(shè)置為拖動(dòng)（move）形狀（在chrome中拖動(dòng)的時(shí)候，光標(biāo)會(huì)變成文字光標(biāo)，松開鼠標(biāo)鍵后恢復(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;
}
定義一個(gè)工具函數(shù)，用來獲取指定ID屬性的元素：
復(fù)制代碼 代碼如下:
function $id(id) {
return document.getElementById(id);
}
定義一個(gè)瀏覽器核心標(biāo)識(shí)isIE：
var isIE = (window.navigator.userAgent.indexOf("IE") == -1) ? false : true;
獲取到窗口元素及其標(biāo)題欄：
復(fù)制代碼 代碼如下:
var win = $id("win");
var header = $id("win_header");
為了方便記錄鼠標(biāo)和窗口的位置信息，創(chuàng)建一個(gè)位置：
復(fù)制代碼 代碼如下:
var pos =function(x, y) {
this.x = x;
this.y = y;
};
給窗口設(shè)置一個(gè)初始位置（css的left值和top值）。
這里不知道是為什么，如果不使用js設(shè)置這兩個(gè)屬性，就取不到值，在CSS中指定了也不行。
復(fù)制代碼 代碼如下:
var originalpos = new pos(20, 20);
在拖動(dòng)窗口的過程中，需要記錄的值有：
鼠標(biāo)按下時(shí)鼠標(biāo)光標(biāo)的位置
復(fù)制代碼 代碼如下:
var oldmouse =new pos(0, 0);
鼠標(biāo)按下時(shí)窗口的位置
var oldpos = new pos(0, 0);
鼠標(biāo)移動(dòng)時(shí)窗口的新的位置
var newpos = new pos(0, 0);
設(shè)置窗口的初始位置
復(fù)制代碼 代碼如下:
win.style.left = originalpos.x + "px";
win.style.top = originalpos.y + "px";
又是因?yàn)闉g覽器的差異（IE和非IE），元素綁定事件處理函數(shù)的方法不同（IE使用attachEvent，非IE使用addEventListener），為了簡(jiǎn)化事件綁定的操作，定義一個(gè)事件綁定函數(shù)：
復(fù)制代碼 代碼如下:
function bind(ev, func) {
if(isIE) {
header.attachEvent("on" + ev, func);
} else {
header.addEventListener(ev, func, false);
}
}
在做好這些工作后，就可以開始處理鼠標(biāo)事件了。
在這個(gè)程序中，只希望鼠標(biāo)左鍵拖動(dòng)窗口，其它鍵都不能，所以需要判斷是否是鼠標(biāo)左鍵按下。而這個(gè)判斷會(huì)在幾個(gè)函數(shù)中都使用到，所以提取出來到一個(gè)函數(shù)中，通過傳入的參數(shù)（鼠標(biāo)鍵值，即按下了哪個(gè)鍵）判斷。在這里，需要注意瀏覽器間的差異：IE中鼠標(biāo)左鍵的值是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;
}
}
拖動(dòng)動(dòng)作是在按下鼠標(biāo)左鍵后移動(dòng)來完成的。把這個(gè)動(dòng)作分享開來，即是鼠標(biāo)先觸發(fā)了按下動(dòng)作（mousedown），然后觸發(fā)了移動(dòng)動(dòng)作（mousemove）。為了判斷是否是真的在拖動(dòng)還是只是鼠標(biāo)從窗口上經(jīng)過，設(shè)置一個(gè)變量來記錄鼠標(biāo)按下的狀態(tài)：
var mousedown = false;
由于CSS中存在的兼容性問題，這里使用js來控制鼠標(biāo)懸停在窗口標(biāo)題欄上面的時(shí)候的顏色變化。
懸浮
復(fù)制代碼 代碼如下:
function over(e){
header.style.backgroundColor = "#5d5d5d";
}
離開
復(fù)制代碼 代碼如下:
function out(e) {
header.style.backgroundColor = "#4d4d4d";
// 有時(shí)候鼠標(biāo)會(huì)在未松開的情況下離開窗口，
// 此時(shí)通過觸發(fā)鼠標(biāo)的松開事件來使窗口脫離鼠標(biāo)的控制
up(e);
}
按下
在按下事件中，需要先判斷是否按下的是鼠標(biāo)的左鍵；
若是才記錄鼠標(biāo)和窗口此時(shí)的位置，否則不記錄。
復(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;
}
移動(dòng)
這里就涉及到鼠標(biāo)的兩個(gè)事件：
按下和移動(dòng)。當(dāng)且僅當(dāng)鼠標(biāo)左鍵按下時(shí)，移動(dòng)動(dòng)作才有效。
窗口的新位置，是由鼠標(biāo)在拖動(dòng)狀態(tài)下的移動(dòng)距離（X和Y的距離）決定的。即：
新的鼠標(biāo)位置送去按下左鍵時(shí)記錄下的位置，得到一個(gè)距離，然后將窗口的位置加上鼠標(biāo)移動(dòng)的距離得到窗口的新位置。
復(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中的拖動(dòng)有問題，只能第一次正常拖動(dòng)，后面就有點(diǎn)亂了！
您可能感興趣的文章:
- js 鼠標(biāo)拖動(dòng)對(duì)象 可讓任何div實(shí)現(xiàn)拖動(dòng)效果
- js實(shí)現(xiàn)可拖動(dòng)DIV的方法
- 比較精簡(jiǎn)的Javascript拖動(dòng)效果函數(shù)代碼
- JS實(shí)現(xiàn)彈出浮動(dòng)窗口(支持鼠標(biāo)拖動(dòng)和關(guān)閉)實(shí)例詳解
- js實(shí)現(xiàn)懸浮窗效果(支持拖動(dòng))
- js實(shí)現(xiàn)圖片拖動(dòng)改變順序附圖
- JS拖動(dòng)鼠標(biāo)畫出方框?qū)崿F(xiàn)鼠標(biāo)選區(qū)的方法
- JS實(shí)現(xiàn)可縮放、拖動(dòng)、關(guān)閉和最小化的浮動(dòng)窗口完整實(shí)例
- 鼠標(biāo)拖動(dòng)動(dòng)態(tài)改變表格的寬度的js腳本 兼容ie/firefox
- JS實(shí)現(xiàn)音量控制拖動(dòng)
相關(guān)文章
JS及JQuery對(duì)Html內(nèi)容編碼,Html轉(zhuǎn)義
本文主要介紹了JS及JQuery對(duì)Html內(nèi)容編碼,Html轉(zhuǎn)義的方法。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
一個(gè)報(bào)數(shù)游戲js版(約瑟夫環(huán)問題)
隨便給一個(gè)數(shù) 比如100，那么從1到100圍成一個(gè)圓圈，然后就類似123123報(bào)數(shù)一樣逢3就舍掉，一直這樣輪詢 那么最后剩下來的那個(gè)數(shù)是多少？2010-08-08
ES6引入了一個(gè)新的函數(shù)類型，發(fā)現(xiàn)它并不符合這種運(yùn)行到結(jié)束的特性。這類新的函數(shù)被稱為生成器。生成器的出現(xiàn)是我們知道原來有時(shí)代碼并不會(huì)順利的運(yùn)行，可以通過暫停的方式進(jìn)行異步回調(diào)，讓我們摒棄了此前的認(rèn)知。本文就來聊聊JavaScript中生成器的相關(guān)知識(shí)2022-11-11
微信小程序?qū)崙?zhàn)項(xiàng)目之富文本編輯器實(shí)現(xiàn)
富文本在Web開發(fā)上的地位大家可想而知,很多地方都需要用到富文本編輯器,比如開發(fā)類似新聞管理小程序、商品簡(jiǎn)介等,下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崙?zhàn)項(xiàng)目之富文本編輯器實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要為大家介紹了JavaScript前端面試題中常出現(xiàn)的問題：如何用JavaScript來實(shí)現(xiàn)內(nèi)置的bind方法，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2022-07-07
簡(jiǎn)單幾行JS Code實(shí)現(xiàn)IE郵件轉(zhuǎn)發(fā)新浪微博
大概就是說我們可以用window.external.menuArguments這個(gè)對(duì)象獲取到內(nèi)部的信息，如window，document這些常用的對(duì)象2013-07-07
關(guān)于RxJS Subject的學(xué)習(xí)筆記
這篇文章主要介紹了關(guān)于RxJS Subject的學(xué)習(xí)筆記，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要為大家詳細(xì)介紹了利用模板將HTML從JavaScript中抽離的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了小程序tab頁無法傳遞參數(shù)的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
JavaScript代碼實(shí)現(xiàn)txt文件的上傳預(yù)覽功能
本篇文章給大家介紹了JavaScript代碼實(shí)現(xiàn)txt文件的上傳預(yù)覽功能，文字代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，需要的朋友參考下吧2018-03-03