Javascript拖拽&拖放系列文章3之細(xì)說(shuō)事件對(duì)象
3.2 將IE事件模型和DOM事件模型的差異封裝起來(lái)
注:本來(lái)打算采用《Javascript高級(jí)程序設(shè)計(jì)》這本書中所敘述的方法來(lái)封裝差異,讀過(guò)的人知道,作者是用return EventUtil.getEvent.caller.Arguments[0]來(lái)獲得原始的事件對(duì)象的,這的確很棒,很巧妙,已經(jīng)很完美了,我沒(méi)有必要在re-invent the wheel了,只可惜Opera瀏覽器不支持caller屬性,為了瀏覽器兼容性,所以我不得不采用自己的方法了。caller的詳細(xì)內(nèi)容可以參考《全面理解JavaScript中的caller,callee,call,apply》 這篇文章。
3.2.1 定義框架
首先定義一個(gè)封裝的框架,再細(xì)細(xì)添枝加葉。
var EventUtilization=new Object;
EventUtilization.getCompatibleEvent=function(e){
//判斷是否是IE瀏覽器
if(!EventUtilization.getCompatibleEvent.arguments[0])
{
e=window.event;
//使IE的window.event屬性和DOM的一樣
//..
return e;
}
return e;
}
很簡(jiǎn)單,就不再贅述了。
3.2.2 格式化window.Event對(duì)象
1 構(gòu)造DOM中的pageX和pageY屬性
這兩個(gè)屬性分別表示鼠標(biāo)指針相對(duì)于整張網(wǎng)頁(yè)(取決于body元素的實(shí)際邊界范圍)的x、y坐標(biāo),單位是像素。在構(gòu)造它們之前,需要了解另外兩個(gè)屬性document.Body.scrollLeft和document.body.scorllTop,單位是像素,當(dāng)瀏覽器出現(xiàn)滾動(dòng)條且滾動(dòng)頁(yè)面時(shí),數(shù)值分別等同于頁(yè)面在水平、垂直方向上滾動(dòng)的距離,否則為0像素。
我想你已經(jīng)想到了該如何構(gòu)造pageX和pageY了。沒(méi)錯(cuò),pageX=clientX+scorllLeft,pageY=clientY+clientTop。
Javascript代碼片段:
if(!EventUtilization.getCompatibleEvent.arguments[0])
{
e=window.event;
e.pageX=e.clientX+document.body.scrollLeft;
e.pageY=e.clientY+document.body.scrollTop;
//..
}
2 構(gòu)造DOM中的relatedTarget屬性
我們可以用事件對(duì)象的type屬性判斷鼠標(biāo)事件類型,從而決定何時(shí)將fromElement或toElement的值賦給relatedTarget屬性。
Javascript代碼片段:
if(!EventUtilization.getCompatibleEvent.arguments[0])
{
e=window.event;
//..
if(e.type=="mouseout")
{
e.relatedTarget=e.toElement;
}
else if(e.type=="mouseover")
{
e.relatedTarget=e.fromElement;
}
//..
}
3 構(gòu)造DOM中的target/currentTarget屬性
終于快要結(jié)尾了......
只需要引用srcElement屬性就可以了,不過(guò)要注意,我們?cè)谇懊嬲f(shuō)過(guò),在mouseout事件中,DOM的target總是等于relatedTarget屬性,因此我們同樣要構(gòu)造currentTarget屬性,以免在調(diào)用currentTarget時(shí)返回“undefined”。
if(!EventUtilization.getCompatibleEvent.arguments[0])
{
e=window.event;
//..
e.target=e.srcElement;
e.currentTarget=e.srcElement;
//..
}
完整的JS代碼:
JS代碼
var EventUtilization=new Object;
EventUtilization.getCompatibleEvent=function(e){
if(!EventUtilization.getCompatibleEvent.arguments[0])
{
e=window.event;
e.pageX=e.clientX+document.body.scrollLeft;
e.pageY=e.clientY+document.body.scrollTop;
if(e.type=="mouseout")
{
e.relatedTarget=e.toElement;
}
else if(e.type=="mouseover")
{
e.relatedTarget=e.fromElement;
}
e.target=e.srcElement;
e.currentTarget=e.srcElement;
return e;
}
return e;
}
它能夠完美的兼容Internet Explorer、Mozilla Firefox、Netscape、Sarari(Chrome)、Opera等瀏覽器的流行版本。
3.2.3 框架的使用
我將它命名為EventUtilization.js,將它放在頁(yè)面中后,就可以用如下的方法使用了:
var source=document.getElementById("mouseoverElement");
source.onmouseover=function(e){
var e=EventUtilization.getCompatibleEvent(e);
alert(e.pageX);
alert(e.pageY);
alert(e.relatedTarget.tagName);
alert(e.target.tagName);
alert(e.currentTarget.tagName);
};
啊,冗長(zhǎng)的一篇文章被我寫完了,我終于可以休息一下了........希望能給一些人幫助,哪怕是一點(diǎn)點(diǎn),也會(huì)是我繼續(xù)寫下去的動(dòng)力........
至于下一篇寫什么?賣個(gè)關(guān)子先。
To be continued........
- JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)對(duì)象拖放功能的方法
- Java實(shí)現(xiàn)鼠標(biāo)拖放功能的方法
- Vue.js實(shí)現(xiàn)拖放效果的實(shí)例
- javascript 拖放效果實(shí)現(xiàn)代碼
- JavaScript 拖放效果代碼
- JavaScript 圖片放大鏡(可拖放、縮放效果)
- 基于jQuery實(shí)現(xiàn)的百度導(dǎo)航li拖放排列效果,即時(shí)更新數(shù)據(jù)庫(kù)
- 廣泛收集的jQuery拖放插件集合
- asp.net+jquery Gridview的多行拖放, 以及跨控件拖放
- 腳本div實(shí)現(xiàn)拖放功能(兩種)
相關(guān)文章
JS實(shí)現(xiàn)可點(diǎn)擊展開與關(guān)閉的左側(cè)廣告代碼
這篇文章主要介紹了JS實(shí)現(xiàn)可點(diǎn)擊展開與關(guān)閉的左側(cè)廣告代碼,通過(guò)鼠標(biāo)onClick事件調(diào)用自定義javascript函數(shù)實(shí)現(xiàn)頁(yè)面元素及樣式的顯示與隱藏效果,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-09-09JavaScript回調(diào)(callback)函數(shù)概念自我理解及示例
此文適合JavaScript入門級(jí)選手閱讀,在JavaScript里什么叫Callback“回調(diào)函數(shù)”,把方法b當(dāng)做一個(gè)參數(shù)傳遞個(gè)方法a,當(dāng)方法a執(zhí)行完后執(zhí)行另外一個(gè)指定函數(shù)(這里是b函數(shù)),感興趣的朋友可以了解下哈2013-07-07基于javascript實(shí)現(xiàn)按圓形排列DIV元素(一)
本篇文章主要介紹基于javascript實(shí)現(xiàn)按圓形排列DIV元素的方法,此文著重于介紹對(duì)實(shí)現(xiàn)的按圓形排列DIV元素的分析,需要的朋友來(lái)看下吧2016-12-12javascript下過(guò)濾數(shù)組重復(fù)值的代碼
javascript下過(guò)濾數(shù)組重復(fù)值的代碼...2007-09-09獲取div編輯框,textarea,input text的光標(biāo)位置 兼容IE,F(xiàn)F和Chrome的方法介紹
獲取div編輯框,textarea,input text的光標(biāo)位置 兼容IE,F(xiàn)F和Chrome的方法介紹,有需求的朋友可以參考2012-11-11基于BootStrap Metronic開發(fā)框架經(jīng)驗(yàn)小結(jié)【二】列表分頁(yè)處理和插件JSTree的使用
本文給大家介紹基于BootStrap Metronic開發(fā)框架經(jīng)驗(yàn)小結(jié)【二】列表分頁(yè)處理和插件JSTree的使用,介紹頁(yè)面內(nèi)容常用到的數(shù)據(jù)分頁(yè)處理,以及Bootstrap插件JSTree的使用,非常具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-05-05解決微信小程序中轉(zhuǎn)換時(shí)間格式IOS不兼容的問(wèn)題
今天小編就為大家分享一篇關(guān)于解決微信小程序中轉(zhuǎn)換時(shí)間格式IOS不兼容的問(wèn)題,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來(lái)看看吧2019-02-02