關於event 和 window.event問題及瀏覽器相容問題
- < html>
- < script language=“javascript”>
- function test(event) {
- event = event || window.event;
- if(event.keyCode==13){
- alert(“你按了回車”)
- }
- if(event.shiftKey==true) {
- alert(“你按了shift”)
- }
- if(event.ctrlKey==true){
- alert(“你按了ctrl”)
- }
- if(event.altKey==true) {
- alert(“你按了alt”)
- }
- }
- < /script>
- < body onkeydown=“test(event)”>
- Please type “enter”key “shift”key “ctrl”key “alt”key.
- </body>
- < /html>
有關 event 和 window.event在IE/Opera中,是window.event,而在Firefox中,是event 而事件的物件,在IE中是window.event.srcElement,在Firefox中是event.target,而在Opera中則兩者都支援。
我們還是用例子來說明。 //********************************** event的跨瀏覽器測試
//Firefox中在寫關於event的函式的時候,必須把event物件作為引數傳遞給函式,這樣才能使用event物件
- function doTestEvent( evt ) {
- //如果是IE/Opera,我們就用 srcElement 來獲取觸發事件的物件
- //如果是Firefox,我們就用 target 來獲取觸發事件的物件
- var src = evt.srcElement?evt.srcElement : evt.target;
- alert( src.value );
- }
//–> //*********************************** 這裡順便說一下判斷滑鼠按鍵的問題。 在 IE 裡面 左鍵是 window.event.button = 1 右鍵是 window.event.button = 2 中鍵是 window.event.button = 4 沒有按鍵動作的時候 window.event.button = 0 在 Firefox 裡面 左鍵是 event.button = 0 右鍵是 event.button = 2 中鍵是 event.button = 1 沒有按鍵動作的時候 event.button = 0 在 Opera 7.23/7.54 裡面 滑鼠左鍵是 window.event.button = 1 沒有按鍵動作的時候 window.event.button = 1 右鍵和中鍵無法獲取 而在 Opera 7.60/8.0 裡面 滑鼠左鍵是 window.event.button = 0 沒有按鍵動作的時候 window.event.button = 0 右鍵和中鍵無法獲取 下面我們寫一個能在 IE4.01+/Firefox 0.9+/Opera 7.23+ 環境中均能執行正常的小程式,功能是用滑鼠拖動層。 //***********************************
可用滑鼠拖動的層
- var moving = false;
- var initX = 0;
- var initY = 0;
- //*******************
- // 獲取觸發事件的物件
- //*******************
- function findSrc(evt){
- return( evt.target evt.target : evt.srcElement );
- }
- function start(evt)
- {
- //按下滑鼠左鍵才允許移動
- //evt.button == 1 IE/Opera 7.23/7.54
- //evt.button == 0 Firefox/Opera 7.6+
- if ( evt.button == 1 || evt.button == 0) {
- moving = true;
- initX = evt.offsetX evt.offsetX : evt.layerX;
- initY = evt.offsetY evt.offsetY : evt.layerY;
- findSrc( evt ).style.cursor = "move";
- window.status = "開始(button=" + evt.button + ")";
- } else {
- stop( evt );
- }
- }
- function stop( evt ) {
- moving = false;
- findSrc( evt ).style.cursor = "";
- window.status = "結束(button=" + evt.button + ")";
- }
- function move(evt) {
- //按下滑鼠左鍵才允許移動
- //evt.button == 1 IE/Opera 7.23/7.54
- //evt.button == 0 Firefox/Opera 7.6+
- if (moving && ( evt.button == 1 || evt.button == 0 )) {
- var intx = document.body.scrollLeft + evt.clientX; //獲取當前滑鼠位置的X座標
- var inty = document.body.scrollTop + evt.clientY; //獲取當前滑鼠位置的Y座標
- var div = findSrc( evt );
- div.style.top = inty - initY;
- div.style.left = intx - initX;
- window.status = "X=" + intx + " Y=" + inty + " button=" + evt.button;
- } else {
- window.status = "已停止(button=" + evt.button + ")";
- }
- }
原文出處:
[1] seminmredoxu, event 和 window.event, http://blog.csdn.net/seminmredoxu/article/details/6856253