Cách tốt nhất để thay thế các liên kết bằng các hàm JS là gì?

Question

Một mẫu bắt đầu hiển thị rất nhiều trong một trong các ứng dụng web mà tôi đang làm việc là các liên kết được sử dụng để trở thành một liên kết thẻ thông thường bây giờ cần một hộp bật lên hỏi "bạn có chắc không?" trước khi liên kết sẽ đi. (Nếu người dùng nhấn hủy, không có gì xảy ra.)

Chúng tôi đã có giải pháp hoạt động, nhưng bằng cách nào đó chúng tôi là cửa hàng ứng dụng web không có chuyên gia Javascript, vì vậy tôi đã để lại cảm giác thu thập dữ liệu này cách tốt hơn để hoàn thành công việc.

Vì vậy, các chuyên gia JS, cách tuân thủ tiêu chuẩn nhất, trình duyệt chéo để thực hiện việc này là gì?

(Đối với hồ sơ, điều này đã là một trang web yêu cầu JS, vì vậy không cần thiết phải có một phiên bản "non-JS". Tuy nhiên, nó không cần phải làm việc trong bất kỳ và tất cả các trình duyệt một cách hợp lý hiện đại.)

(Ngoài ra, cho điểm thưởng nó sẽ được tốt đẹp nếu mọi người với JS tắt không có công việc liên kết, chứ không phải bỏ qua các hộp xác nhận.)

Answer 1

Không phô trương Javascript

Cách tốt nhất là để thêm các phương pháp xử lý sự kiện cho các liên kết.

Hàm xác nhận() sản xuất hộp thoại bạn mô tả và trả về true hoặc false tùy thuộc vào lựa chọn của người dùng.

Phương thức xử lý sự kiện trên các liên kết có hành vi đặc biệt, nghĩa là chúng sẽ hủy hành động liên kết nếu chúng trả về false.

var link = document.getElementById('confirmToFollow'); 

link.onclick = function() { 
    return confirm("Are you sure?"); 
}; 

Nếu bạn muốn liên kết để cần javascript, HTML phải được chỉnh sửa. Tháo href:

<a href="#" id="confirmToFollow"... 

Bạn rõ ràng có thể thiết lập các điểm đến liên kết trong xử lý sự kiện:

var link = document.getElementById('confirmToFollow'); 

link.onclick = function() { 
    if(confirm("Are you sure?")) { 
     window.location = "http://www.stackoverflow.com/"; 
    } 
    return false; 
}; 

Nếu bạn muốn cùng một phương pháp gọi trên nhiều liên kết, bạn có thể có được một NodeList trong các liên kết bạn muốn và áp dụng phương thức cho mỗi khi bạn lặp qua nútList:

var allLinks = document.getElementsByTagName('a'); 
for (var i=0; i < allLinks.length; i++) { 
    allLinks[i].onclick = function() { 
     return confirm("Are you sure?"); 
    }; 
} 

Có thêm hoán vị cùng ý tưởng ở đây, chẳng hạn như sử dụng tên lớp để xác định liên kết nào sẽ lắng nghe phương pháp này và chuyển một vị trí duy nhất vào từng phương pháp dựa trên một số tiêu chí khác. Họ là sáu người, nửa tá người khác.

phương pháp tiếp cận thay thế (không hoạt động được khuyến khích):

Một nản chí thực hành là để đính kèm một phương pháp thông qua một onclick thuộc tính:

<a href="mypage.html" onclick="... 

Một nản chí thực hành là để thiết lập thuộc tính href để gọi hàm:

<a href="javascript: confirmLink() ... 

Lưu ý rằng những thực tiễn không khuyến khích này là tất cả các giải pháp làm việc.

Answer 2

đây là cách chúng tôi đã làm việc đó:

<a href="#" onClick="goThere(); return false;">Go to new page</a>` 

function goThere() 
{ 
    if(confirm("Are you sure?")) 
    { 
     window.location.href="newPage.aspx"; 
    } 
} 

(EDIT: Mã được định dạng lại để tránh cuộn ngang)

Answer 3

<a href="http://..." onclick="return confirm('are you sure?')">text</a> 

Answer 4

Một phiên bản đẳng cấp ràng buộc (không cần inline onclick thuộc tính): liên kết bên ngoài < kịch bản này> sau khi tất cả các điều khiển confirmable:

// dangerous - warnings on potentially harmful actions 
// usage: add class="dangerous" to <a>, <input> or <button> 
// Optionally add custom confirmation message to title attribute 

function dangerous_bind() { 
    var lists= [ 
     document.getElementsByTagName('input'), 
     document.getElementsByTagName('button'), 
     document.getElementsByTagName('a') 
    ]; 
    for (var listi= lists.length; listi-->0;) { var els= lists[listi]; 
     for (var eli= els.length; eli-->0;) { var el= els[eli]; 
      if (array_contains(el.className.split(' '), 'dangerous')) 
       el.onclick= dangerous_click; 
     } 
    } 
} 

function array_contains(a, x) { 
    for (var i= a.length; i-->0;) 
     if (a[i]==x) return true; 
    return false; 
} 

function dangerous_click() { 
    return confirm(this.title || 'Are you sure?'); 
} 

dangerous_bind(); 

Đây là một hơi dài dòng do sự làm việc ràng buộc cũng trên các nút/nút. Nói chung, mặc dù có ý nghĩa để có các tùy chọn ‘nguy hiểm’ mà bạn sẽ muốn xác nhận trên các nút thay vì liên kết. Các yêu cầu GET được kích hoạt bởi các liên kết không thực sự có bất kỳ hiệu ứng hoạt động nào.

Answer 5

Trong jquery nó là một cái gì đó như:

$("a").click(function() {if(confirm('yadda yadda')) event.stopPropagation();}); 

Nếu tôi hiểu những gì jgreep đề cập, nếu bạn chỉ muốn xác nhận xuất hiện trên một số liên kết, bạn sẽ ràng buộc các handler nhấp chuột duy nhất để liên kết với quyền lớp học. Bạn có thể làm điều này chỉ cho các neo hoặc cho bất kỳ phần tử html nào có lớp đó.

$(".conf").click(function() {if(confirm('yadda yadda')) event.stopPropagation();}); 

Answer 6

var links = document.getElementsByTagName('A'); 

for (var i = 0; i < links.length; i++) 
{ 
    links[i].onclick = function() 
    {  
     return Confirm("Are you sure?"); 
    } 
} 

này áp dụng các thông điệp tới tất cả các liên kết, tuy nhiên nó khó khăn hơn một chút để làm các liên kết không hoạt động mà không cần javascript tự động (trên thực tế là không thể của nó).

Answer 7

Nếu bạn đang sử dụng jQuery bạn sẽ làm gì:

jQuery(document).ready(
    jQuery("a").click(){ 
     //you'd place here your extra logic 
     document.location.href = this.href; 
    } 
); 

Answer 8

Hãy xem What’s the best way to open new browser window. Bạn có thể làm một cái gì đó tương tự, nhưng ném lên xác nhận trước khi mở một cửa sổ mới.