1. 程式人生 > >關於event 和 window.event問題及瀏覽器相容問題

關於event 和 window.event問題及瀏覽器相容問題

  1. < html>
  2. < script language=“javascript”>
  3. function test(event) {
  4. event = event || window.event;
  5. if(event.keyCode==13){
  6. alert(“你按了回車”)
  7. }
  8. if(event.shiftKey==true) {
  9. alert(“你按了shift”)
  10. }
  11. if(event.ctrlKey==true){
  12. alert(“你按了ctrl”)
  13. }
  14. if(event.altKey==true) {
  15. alert(“你按了alt”)
  16. }
  17. }
  18. < /script>
  19. < body onkeydown=“test(event)”>
  20. Please type “enter”key “shift”key “ctrl”key “alt”key.
  21. </body>
  22. < /html>

有關 event 和 window.event在IE/Opera中,是window.event,而在Firefox中,是event 而事件的物件,在IE中是window.event.srcElement,在Firefox中是event.target,而在Opera中則兩者都支援。

我們還是用例子來說明。  //********************************** event的跨瀏覽器測試 

//Firefox中在寫關於event的函式的時候,必須把event物件作為引數傳遞給函式,這樣才能使用event物件 

  1. function doTestEvent( evt ) {
  2. //如果是IE/Opera,我們就用 srcElement 來獲取觸發事件的物件
  3. //如果是Firefox,我們就用 target 來獲取觸發事件的物件
  4. var src = evt.srcElement?evt.srcElement : evt.target;
  5. alert( src.value );
  6. }

//–>  //*********************************** 這裡順便說一下判斷滑鼠按鍵的問題。  在 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+ 環境中均能執行正常的小程式,功能是用滑鼠拖動層。  //***********************************

可用滑鼠拖動的層

  1. var moving = false;
  2. var initX = 0;
  3. var initY = 0;
  4. //*******************
  5. // 獲取觸發事件的物件
  6. //*******************
  7. function findSrc(evt){
  8. return( evt.target evt.target : evt.srcElement );
  9. }
  10. function start(evt)
  11. {
  12. //按下滑鼠左鍵才允許移動
  13. //evt.button == 1 IE/Opera 7.23/7.54
  14. //evt.button == 0 Firefox/Opera 7.6+
  15. if ( evt.button == 1 || evt.button == 0) {
  16. moving = true;
  17. initX = evt.offsetX evt.offsetX : evt.layerX;
  18. initY = evt.offsetY evt.offsetY : evt.layerY;
  19. findSrc( evt ).style.cursor = "move";
  20. window.status = "開始(button=" + evt.button + ")";
  21. } else {
  22. stop( evt );
  23. }
  24. }
  25. function stop( evt ) {
  26. moving = false;
  27. findSrc( evt ).style.cursor = "";
  28. window.status = "結束(button=" + evt.button + ")";
  29. }
  30. function move(evt) {
  31. //按下滑鼠左鍵才允許移動
  32. //evt.button == 1 IE/Opera 7.23/7.54
  33. //evt.button == 0 Firefox/Opera 7.6+
  34. if (moving && ( evt.button == 1 || evt.button == 0 )) {
  35. var intx = document.body.scrollLeft + evt.clientX; //獲取當前滑鼠位置的X座標
  36. var inty = document.body.scrollTop + evt.clientY; //獲取當前滑鼠位置的Y座標
  37. var div = findSrc( evt );
  38. div.style.top = inty - initY;
  39. div.style.left = intx - initX;
  40. window.status = "X=" + intx + " Y=" + inty + " button=" + evt.button;
  41. } else {
  42. window.status = "已停止(button=" + evt.button + ")";
  43. }
  44. }

原文出處:

[1] seminmredoxu, event 和 window.event, http://blog.csdn.net/seminmredoxu/article/details/6856253