昨天晚上,朋友問我怎樣實現模擬鼠標點擊事件,于是有了查找資料,并得到了一些結果。
先附上代碼。
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
a{
border: 2px solid red;
text-decoration: none;
cursor: pointer;
font-weight: bold;
margin-top: 10px;
padding: 20px;
}
</style>
</head>
<body>
<a id = "box" href = "javascript:void(0)">點擊</a>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var oBox = document.getElementById("box");
function onclick(e){
e = e || window.event;
// console.log(e);
alert("a");
}
simulation(oBox, "click", onclick);
function simulation(obj,type,response){
var isIE=navigator.userAgent.match(/MSIE (\d)/i);
isIE = isIE ? isIE[1] : undefined;
//給obj綁定事件
//傳統瀏覽器使用attachEvent 現代瀏覽器使用addEventListner
isIE < 9 ? obj.attachEvent("on" + type, response):
obj.addEventListener(type, response, false);
// 觸發自定義事件
if(isIE<9){
//傳統瀏覽器
var event=document.createEventObject();//創建對象
event.msg="我是fireEvent觸發的";//給事件對象添加屬性
obj.fireEvent("on" + type, event);//觸發事件
}else{
//現代瀏覽器
var e=document.createEvent("MouseEvents");//創建事件對象
e.initEvent(type,false,false);//初始化事件對象initMouseEvent需要更多參數
e.msg="我是despatchEvent觸發的"; //給事件對象添加屬性
obj.dispatchEvent(e);//觸發事件
}
}
}
</script>
~~~
現在,需要做一些說明,首先我只考慮了火狐和谷歌的兼容性,沒有考慮IE6,7,8。今天到公司之后,試圖兼容IE6,7,8,首先用IETester測試,遇到很多問題,經朋友推薦,使用2345瀏覽器去測試,可是不知道為什么,IE7,8都會報不支持attachEvent,不支持createEventObject,不支持fireEvent,實在是無奈至極,查了很多資料,這幾個屬性,明明就是IE的專屬。。。
最最神奇的地方是,我去掉兼容性代碼之后重新測測試,竟然IE7,8都是正常的,深深的傷害了我,此處仍然保留考慮兼容性之后的代碼,如果哪位讀到此篇博客的朋友幫我找到問題所在,自當感激不盡。
最后,再簡單敘述下,上面代碼中所使用到一些方法。針對IE幾個的特殊方法,在此略過,等上面的代碼得到確認之后再補充。免得誤導他人。
### 綁定事件:
~~~
obj.addEventListener("事件名(不帶ON)",函數名,true/false); //IE9/IE11、FF、Chrome支持
第一個參數事件名:click、hover、blur等等
第二個參數函數名:此事件響應的函數
第三個參數useCapture,值為true或false,如果是true則采用capture,如果是false則采用bubbling方式,即事件冒泡。
~~~
### 創建事件對象(代替鼠標點擊)
~~~
通過document上的createEvent()方法,創建事件對象,此方法只接受一個參數,即要創建事件對象的事件字符串
UIEvents:通用的UI 事件,鼠標事件鍵盤事件都是繼承自UI事件,在DOM 3 級上使用的是 UIEvent。
MouseEvents:通用的鼠標事件,在DOM 3 級上使用的是 MouseEvent。
MutationEvents:通用的突變事件,在DOM 3 級上使用的是 MutationEvent。
~~~
### 初始化事件對象
~~~
event.initEvent(eventType,canBubble,cancelable)
eventType:事件的類型,字符串值。如"click"
canBubble:事件是否冒泡,true為冒泡
cancaelable:是否可以用preventDefault()方法取消事件
在創建事件對象之后,觸發事件之前。調用 Event.initEvent() 方法。
初始化事件對象,除了可以使用initEvent()方法之外,還可以使用initMouseEvent()和initKeyBoadEvent(),這兩個方法接受的參數都比較多,后面可能會做專門詳細敘述,因為除了鼠標事件之外,還可以模擬鍵盤事件。
~~~
### 觸發事件
~~~
在創建完事件對象之后,通過dispatchEvent()方法來將事件應用到特定的dom節點上,以便其支持該事件。
~~~
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
<div id = "div_out" style = "border:1px solid green;">外層測試
<div id = "div_inside">內層測試</div></div>
</body>
</html>
<script>
window.onload = function(){
document.getElementById("div_out").addEventListener("click",test1,false);
document.getElementById("div_inside").addEventListener("click",test2,false);
function test1(){ alert("外層div觸發"); }
function test2(){ alert("內層div觸發"); }
}
</script>
~~~
當值為false時,是冒泡方式,點擊內層的div時,會先后觸發內層的test2和外層的test1
當值為true時,不冒泡,點擊內層的div,只會觸發內層的test2
- 前言
- jQuery輪播圖插件
- JS模擬事件操作
- JS閉包與變量
- JS綁定事件
- HTML5之file控件
- JavaScript的this詞法
- JavaScript的this詞法(二)
- JS this詞法(三)
- JS檢測瀏覽器插件
- JS拖拽組件開發
- number輸入框
- Modernizr.js和yepnode.js
- DOM變化后事件綁定失效
- div和img之間的縫隙問題
- 詳解JavaScript作用域
- bootstrap入門
- 表單驗證(登錄/注冊)
- Bootstrap網格系統
- Bootstrap排版
- Bootstrap創建表單(一)
- Bootstrap表單(二)
- Bootstrap按鈕
- Bootstrap圖片
- Bootstrap字體圖標(glyphicons)
- Bootstrap的aria-label和aria-labelledby
- Bootstrap下拉菜單
- Bootstrap按鈕組
- Bootstrap按鈕菜單
- Bootstrap輸入框組
- Bootstrap導航元素
- Bootstrap導航欄
- sublimeText頻頻崩潰
- JQuery不同版本的差異(checkbox)
- Bootstrap面包屑導航、分頁、標簽、徽章
- Bootstrap警告
- Bootstrap進度條
- 前端的上傳下載
- JS字符串的相關方法
- CSS3選擇器(全)
- CSS3新增文本屬性詳述
- 利用CSS3實現圖片切換特效
- CSS3新增顏色屬性
- CSS3的border-radius屬性詳解
- JS創建對象幾種不同方法詳解
- JS實現繼承的幾種方式詳述(推薦)
- CSS3響應式布局
- JS模塊化開發(requireJS)
- 利用@font-face實現個性化字體
- 前端在html頁面之間傳遞參數的方法
- CSS自動換行、強制不換行、強制斷行、超出顯示省略號
- 如何在Html中引入外部頁面
- reactJS入門
- React組件生命周期
- 使用React實現類似快遞單號查詢效果
- ReactJS組件生命周期詳述
- React 屬性和狀態詳解