JavaScript: Thêm trình xử lý onClick mà không ghi đè số hiện có

Question

Tôi đang cố sửa đổi tất cả các liên kết trên một trang để chúng thực hiện một số công việc bổ sung khi chúng được nhấp.

Một cách tiếp cận tầm thường có thể là một cái gì đó như thế này:

function adaptLinks() 
{ 
    var links = document.getElementsByTagName('a'); 
    for(i = 0; i != links.length; i++) 
    { 
     links[i].onclick = function (e) 
     { 
      <do some work> 
      return true; 
     } 
    } 
} 

Nhưng một số trong các liên kết đã có tài onClick handler mà cần được bảo tồn. Tôi thử như sau:

function adaptLinks() 
{ 
    var links = document.getElementsByTagName('a'); 
    for(i = 0; i != links.length; i++) 
    { 
     var oldOnClick = links[i].onclick; 
     links[i].onclick = function (e) 
     { 
      if(oldOnClick != null && !oldOnClick()) 
      { 
       return false; 
      } 
      <do some work> 
      return true; 
     } 
    } 
} 

Nhưng điều này không làm việc vì oldOnClick chỉ được đánh giá khi xử lý được gọi là (nó chứa giá trị của liên kết cuối cùng như thời điểm này).

Answer 1

Bạn cần phải tạo ra một đóng cửa để bảo tồn onclick giá trị ban đầu của mỗi liên kết:

<a href="#" onclick="alert('hi');return false;">Hi</a> 
<a href="#" onclick="alert('there');return true;">There</a> 
<script type="text/javascript"> 
function adaptLinks() { 
    var links = document.getElementsByTagName('a'); 
    for (i = 0; i != links.length; i++) { 
     links[i].onclick = (function() { 
      var origOnClick = links[i].onclick; 
      return function (e) { 
       if (origOnClick != null && !origOnClick()) { 
        return false; 
       } 
       // do new onclick handling only if 
       // original onclick returns true 
       alert('some work'); 
       return true; 
      } 
     })(); 
    } 
} 
adaptLinks(); 
</script> 

Lưu ý rằng việc thực hiện điều này chỉ thực hiện việc mới onclick xử lý nếu xử lý onclick gốc trả về true. Đó là tốt nếu đó là những gì bạn muốn, nhưng hãy nhớ rằng bạn sẽ phải sửa đổi mã một chút nếu bạn muốn thực hiện xử lý onclick mới ngay cả khi trình xử lý gốc trả về false.

Thông tin thêm về đóng cửa tại comp.lang.javascript FAQ và từ Douglas Crockford.

Answer 2

Đừng gán cho một event handler ngay: sử dụng đăng ký mô hình addEventListener/attachEvent thay vì (mà cũng có loại bỏ cặp!).

Giới thiệu tốt here.

Answer 3

Sử dụng trình bao bọc xung quanh addEventListener (trình duyệt hỗ trợ DOM) hoặc attachEvent (IE).

Lưu ý rằng nếu bạn muốn lưu trữ giá trị trong biến mà không ghi đè giá trị cũ, bạn có thể sử dụng closures.

function chain(oldFunc, newFunc) { 
    if (oldFunc) { 
    return function() { 
     oldFunc.call(this, arguments); 
     newFunc.call(this, arguments); 
    } 
    } else { 
    return newFunc; 
    } 
} 

obj.method = chain(obj.method, newMethod); 

Trong Aspect Oriented Programming, điều này được gọi là "advice".

Answer 4

cách đặt oldClick = links[i].onclick or an empty function. Giống như rất

var oldOnClick = links[i].onclick || function() { return true; }; 

links[i].onclick = function (e) 
    { 
     if (!oldOnClick()) 
      return false; 
     //<do some work> 
     return true; 
    } 

Hoặc bạn có thể sử dụng attachEvent và addEventListener như những người khác đã đề nghị

function addEvent(obj, type, fn) { 
     if (obj.addEventListener) 
       obj.addEventListener(type, fn, false); 
     else if (obj.attachEvent) 
       obj.attachEvent('on' + type, function() { return fn.apply(obj, [window.event]);}); 
} 

và sử dụng như vậy

addEvent(links[i], 'click', [your function here]); 

Answer 5

Sử dụng JQuery, đoạn code sau hoạt động:

function adaptLinks(table, sortableTable) 
{ 
    $('a[href]').click(function (e) 
    { 
     if(!e.isDefaultPrevented()) 
     { 
      <do some work> 
     } 
    }); 
} 

Điều này đòi hỏi phải sử dụng thêm một thư viện nhưng tránh một số vấn đề tồn tại với addEventListener/attachEvent (giống như vấn đề thứ hai với this references).

Có chỉ là một cái bẫy: nếu bản gốc handler onClick được gán sử dụng "bình thường" JavaScript, dòng

... 
if(!e.isDefaultPrevented()) 
... 

sẽ luôn giải quyết để đúng, ngay cả trong trường hợp xử lý ban đầu hủy bỏ sự kiện bằng cách trả về false. Để khắc phục điều này, trình xử lý ban đầu cũng phải sử dụng JQuery.

Answer 6

Chức năng này nên được sử dụng (nghe sự kiện tiếp cận):

function addEventListener(element, eventType, eventHandler, useCapture) { 
    if (element.addEventListener) { 
     element.addEventListener(eventType, eventHandler, useCapture); 
     return true; 
    } else if (element.attachEvent) { 
     return element.attachEvent('on' + eventType, eventHandler); 
    } 
    element['on' + eventType] = eventHandler; 
} 

hoặc bạn có thể tiết kiệm một số mã khác thêm chức năng này (nếu bạn cần thêm người nghe cùng một sự kiện với nhiều yếu tố):

function addClickListener(element) { 
    addEventListener(element, 'click', clickHandler, false); 
} 

Answer 7

tôi đã có vấn đề với quá tải theo cách đơn giản - trang này là một nguồn lực lớn http://www.quirksmode.org/js/events_advanced.html