js原生事件系統與座標系統

今天來實現乙個可相容的js原生拖拽，在這裡面我將會講到:

1.封裝相容性的事件系統。

2.封裝得到滑鼠當前位置的系統。

3.完成拖拽的實現。

首先，我們要講到滑鼠位置的獲取，講到這個，就離不開js的window.event事件了。先展開乙個例子：

當我點選紅色div的中間偏上的地方，列印他的event物件，看到裡面給了好多屬性，我們來一一解釋一下。先盜乙個表：

名稱解釋

clientx

事件屬性返回當事件被觸發時滑鼠指標向對於瀏覽器頁面（或客戶區）的水平座標。

clienty

事件屬性返回當事件被觸發時滑鼠指標向對於瀏覽器頁面（客戶區）的垂直座標。

screenx

事件屬性可返回事件發生時滑鼠指標相對於螢幕的水平座標。

screeny

事件屬性可返回事件發生時滑鼠指標相對於螢幕的垂直座標。

offsetx

事件發生的地點在事件源元素的座標系統中的 x 座標(ie)。

offsety

事件發生的地點在事件源元素的座標系統中的 y 座標(ie)。

x事件發生的位置的 x 座標, 它相對於用css動態定位的最內層包容元素(ie,~pagex)。

y事件發生的位置的 y 座標, 它相對於用css動態定位的最內層包容元素(ie,~pagey)。

pagex

滑鼠指標的位置，相對於文件的左邊緣(firefox,~x)。

pagey

滑鼠指標的位置，相對於文件的上邊緣(firefox,~y)。

layerx

滑鼠相比較於當前座標系的位置(firefox,~offsetx)。

layery

滑鼠相比較於當前座標系的位置(firefox,~offsety)。

然後把剛剛的圖截完：

我這個div的寬60，高60，left：200，top：100；

clientx/y：可以看到它的clientx是229，根據表裡的描述，它是滑鼠指標到瀏覽器頁面，不包含瀏覽器的工具欄什麼的。因為我點的大約是div的中部最上面，所以它的值就等於top值：100px。x的229就是200的left加上了一半的寬30---就是230左右。（由於我隨便點的，不準確，但是基本接近）。

screenx/y：相對於螢幕的，可以看到x沒怎麼變，y變成了163。就是因為它有61px的工具欄和導航欄的高度。so，你把瀏覽器縮小，它還是相對於螢幕，而不是瀏覽器，你會發現它就和上乙個差太多了。

offsetx/y：這個就比較有用了，滑鼠相對於這個元素的位置，offset嘛，就是相對了。可以看到x是29，y是2，因為我大約點的中間。

x/y: 相對於它父元素的位置，相當於firefox中的pagex、pagey座標。當父元素是document的時候就跟clientx/y一樣。因為它的父元素就是document。。。所以跟上面那幾個一樣。說是ie特有，不過我chrome上面也有這個屬性。但是我chrome的x，y的屬性就算你有父元素還是等於clientx/y，高版本ie也是如此。大家就把它記作clientx/y就好。

layerx/y:其實就是offsetx/y，不過offsetx/y是ie的屬性，layerx/y是firefox支援的。chrome我這個版本都支援了。

pagex/y：滑鼠指標的位置，相對於文件的左邊緣和上邊緣，是firefox中支援的，相似於ie中的x和y。和client區別就是如果有滾動條，他是大於client的

總結一下：clientx/y== x/y==無滾動條下pagex/y offsetx/y==layerx/y screenx/y相對於螢幕，就它自己。

那回到我們取滑鼠座標，怎麼辦呢，看能用到哪個屬性：clientx/y這就是滑鼠真正的座標，相對於本頁面的座標。然後offsetx/y是相對於div的偏移。那麼這個div的位置就是pagex/y-offsetx/y;大家列印一下，就能知道x總是返回100，y返回200；

那我們開始寫取座標的位置的相容js：

function
getposition(e);
var pos_offset={};
pos_rel=
pos_offset=
return
}

取到這個位置就好做拖拽了。就是讓滑鼠點選的時候記錄相對於div的x，y，滑鼠移動設定div的left和top，記得減去剛剛記錄的offsetx/y。滑鼠鬆開就設定不能移動。

好，在這之前先說一下封裝事件系統

事件系統就是為了ie不支援addeventlistener才做的封裝相容

別的瀏覽器可以addeventlistener和removeeventlistener,而ie的是attachevent和detachevent。ie的這個和addeventlistener用法是相似的，需要注意的一點就是要把處理事件儲存用以解除監聽。

var addevent=function
(el,event,cb)
else
if(el.attachevent)
return
cb; //注意這裡返回處理函式
}var cancelevent=function
(el,event,cb)
else
if(el.detachevent)
}

使用就是

var handle=addevent(document,"click",function
(e))

解除事件監聽：

cancelevent(document,"click",handle)

這裡我沒有寫第三個引數，預設冒泡新增解除事件，有需要也可以多加引數。

好，那麼開始寫拖拽吧：

首先點選這個div記錄當前offsetx,y

var isdrag=false;var
ofx,ofy;
var mousedownh=addevent(drag,"mousedown",function
(e))

然後設定div位置：

var mousemoveh=addevent(document,"mousemove",function
(e);
})

最後滑鼠抬起取消它的可移動：

var mouseuph=addevent(document,"mouseup",function
(e))

搞定。最後把全部**分享，大家複製就可以用了

js原生事件系統與座標系統

react中的事件繫結以及與原生事件的區別

View事件分發和座標系統總結

GIS座標系統與投影變換 2 座標系統的參照

js原生事件系統與座標系統

react中的事件繫結以及與原生事件的區別

View事件分發和座標系統總結

GIS座標系統與投影變換 2 座標系統的參照

相關推薦