IE8 onclick xử lý sự kiện

Question

Tôi đã đọc hầu hết các bài viết có liên quan trong quirksmode.org nhưng tôi vẫn không chắc chắn về điều này một:

Làm ứng dụng của tôi tương thích với IE8 (fun fun fun) tôi gặp phải vấn đề này khi cố gắng thiết lập một sự kiện onclick vào một liên kết:

function myClickHandler(event) 
{ 
    alert(event); 
} 

var link = document.getElementById("myLink"); 
link.onclick = myClickHandler; //first option 

Trái ngược với:

function myClickHandler(event) 
{ 
    alert(event); 
} 

var link = document.getElementById("myLink"); 
link.onclick = function() { 
    myClickHandler(event); //second option 
} 

Sử dụng tùy chọn đầu tiên, myClickHandler cảnh báo undefined. Sử dụng tùy chọn thứ hai cảnh báo [object Event] mà làm cho tôi tin rằng đối tượng sự kiện không được thông qua bởi các tùy chọn đầu tiên để xử lý. Tại sao lại như vậy trên IE8?

Lưu ý: Không muốn sử dụng attachEvent vì tôi muốn ghi đè một người nghe duy nhất trong khi thực thi và onclick dường như vừa vặn ở đây.

Answer 1

Có, đối tượng sự kiện không được chuyển thành tham số cho trình xử lý sự kiện kiểu DOM0 trong IE < = 8. Bạn cần phải lấy nó từ window.event. Nếu bạn thêm tham số được gọi là event, trong IE < = 8, đây sẽ là undefined và tham chiếu đến event trong trình xử lý sự kiện sẽ giải quyết thông số không xác định thay vì window.event. Tôi thường sử dụng window.event để làm cho rõ ràng này trong mã:

link.onclick = function(evt) { 
    evt = evt || window.event; 
} 

Answer 2

Khi tôi cần thiết để xử lý bấm các sự kiện trên cửa sổ và làm việc với target tài sản trong IE8
Các giải pháp mà tôi sử dụng trong dự án của tôi:

document.onclick = function(event) { 
       event = event || fixEvent.call(this, window.event); 
       var target = event.target || event.srcElement; 
       var className = target.className; 
       // .... 
      }; 




//For IE8 
// source: https://learn.javascript.ru/fixevent 
    function fixEvent(e) { 

     e.currentTarget = this; 
     e.target = e.srcElement; 

     if (e.type == 'mouseover' || e.type == 'mouseenter') e.relatedTarget = e.fromElement; 
     if (e.type == 'mouseout' || e.type == 'mouseleave') e.relatedTarget = e.toElement; 

     if (e.pageX == null && e.clientX != null) { 
      var html = document.documentElement; 
      var body = document.body; 

      e.pageX = e.clientX + (html.scrollLeft || body && body.scrollLeft || 0); 
      e.pageX -= html.clientLeft || 0; 

      e.pageY = e.clientY + (html.scrollTop || body && body.scrollTop || 0); 
      e.pageY -= html.clientTop || 0; 
     } 

     if (!e.which && e.button) { 
      e.which = e.button & 1 ? 1 : (e.button & 2 ? 3 : (e.button & 4 ? 2 : 0)); 
     } 

     return e; 
    }