Ghi đè hành vi mặc định cho các đối tượng liên kết ('a') trong Javascript

Question

Tôi không biết liệu những gì tôi đang cố hoàn thành có thể thực hiện được hay không. Tôi muốn ghi đè hành vi mặc định cho tất cả các đối tượng neo (A) cho một trang HTML đã cho. Tôi biết tôi có thể lặp qua tất cả các phần tử A và tự động thêm một cuộc gọi onclick vào mỗi một trong số chúng từ phần tử cơ thể onload phương pháp, nhưng tôi đang tìm một giải pháp tuyệt đối hơn. Những gì tôi cần là tất cả A yếu tố được gán một hành động onclick trong đó kêu gọi một phương pháp mà vượt qua bất động sản như một đối số nguyên tố href, vì vậy sau đây:

<a href="http://domain.tld/page.html"> 

động trở thành:

<a href="http://domain.tld/page.html" onclick="someMethodName('http://domain.tld/page.html'); return false;"> 

Giống như tôi cho biết, cách lý tưởng để làm điều này sẽ bằng cách nào đó ghi đè lên lớp Anchor hoàn toàn khi tài liệu tải. Nếu không thể, sau đó tôi sẽ sử dụng phương thức phần tử qua tất cả A (mà tôi đã biết cách thực hiện).

Answer 1

Nếu bạn không muốn để lặp qua tất cả các yếu tố neo của bạn, bạn chỉ có thể sử dụng event delegation, ví dụ:

document.onclick = function (e) { 
    e = e || window.event; 
    var element = e.target || e.srcElement; 

    if (element.tagName == 'A') { 
    someFunction(element.href); 
    return false; // prevent default action and stop event propagation 
    } 
}; 

Kiểm tra ví dụ trên here.

Answer 2

window.onload = function() { 
    var anchorElements = document.getElementsByTagName('a'); 
    for (var i in anchorElements) 
     anchorElements[i].onclick = function() { 
      alert(this.href); 
      return false; 
     } 
} 

Đây là cách đơn giản nhất để thực hiện. Bọc trong <script type="text/javascript">...</script> trong đầu tài liệu và nó sẽ chạy trên tải trang.

Answer 3

Không có cách nào để ghi đè lên tất cả các yếu tố neo sự kiện onlick. Bạn có thể thêm onclick vào nội dung tài liệu và có logic để xem liệu có được truyền lên từ phần tử neo hay không và thực hiện sự kiện trong trường hợp đó, nhưng giải pháp này có thể gây ra sự cố nếu trang của bạn phức tạp và không truyền bá nhấp chuột trong vài trường hợp.

Tôi sẽ kết hợp với giải pháp getElementsByTagName nếu khả thi của nó.

Answer 4

Sử dụng jQuery:

$(function() { 
    $("a").click(function() { 
     return someMethodName($(this).attr('href')); 
    }); 
}); 

function someMethodName(href) 
{ 
    console.log(href); 
    return false; 
} 

Answer 5

Không sử dụng một trường hợp nếu có nhiều sự kiện mà bạn cần phải xử lý. Sử dụng thành phần chuỗi thay thế để xây dựng đường dẫn đến hàm cần được gọi. Điều này đòi hỏi một mẫu thử nghiệm được thêm vào các phần tử "A" của bạn để xác định chuỗi và chuỗi mặc định được tạo thành. Thuộc tính data trên phần tử sẽ có thể ghi đè lên mặc định. Về cơ bản, chúng tôi chỉ muốn một thông điệp và một hành động để vượt qua theo mặc định và được thay đổi một cách rõ ràng trong đánh dấu. Hành động được chỉ định phải được xuất bản ở đâu đó dưới dạng API hoặc chức năng thư viện có thể truy cập khác và có thể gọi bằng lib ['funName']. Chỉ cần cung cấp cho nó một thuộc tính, không phải lo lắng về tên hoặc id. Nguyên mẫu và thuộc tính sẽ hữu ích cho việc gỡ bỏ, bởi vì bạn sẽ phải trả lời.

Answer 6

Tương tự như câu trả lời của Benji XVI, nhưng sử dụng querySelectorAll, trong ví dụ: div vùng chứa với lớp 'container' Và sử dụng es6.

const $elems = document.querySelectorAll('.container a') 
var elems = Array.from($elems) 
elems.map(a => { 
    a.onclick = (e) => { 
    e.preventDefault() 
    window.alert('Clicking external links is disabled') 
    } 
})