Liên kết liên kết HTML - href và nhấp vào cả hai?

Tôi muốn tác giả một thẻ liên kết thực thi một số JavaScript và sau đó tiếp tục đi đến bất cứ nơi nào hrefsử dụng nó. Việc gọi một hàm thực thi JavaScript của tôi và sau đó đặt window.locationhoặc top.locationđến hrefvị trí không hoạt động đối với tôi.

Vì vậy, hãy tưởng tượng tôi có một phần tử có id "Foo" trên trang. Tôi muốn tạo một anchor tương tự như:

<a href="#Foo" onclick="runMyFunction(); return false;">Do it!</a>

Khi điều này được nhấp vào, tôi muốn thực thi runMyFunction và sau đó chuyển trang đến #Foo(không gây ra tải lại - sử dụng top.locationsẽ khiến nó tải lại trang).

Gợi ý? Tôi rất vui khi sử dụng jQuery nếu nó có thể giúp ích ở đây ...

Chỉ cần return truethay thế?

Giá trị trả về từ onClickmã là giá trị xác định xem hành động được nhấp vốn có của liên kết có được xử lý hay không - trả về falsecó nghĩa là nó không được xử lý, nhưng nếu bạn trả lại truethì trình duyệt sẽ tiếp tục xử lý sau khi hàm của bạn trả về và chuyển sang trạng thái thích hợp. mỏ neo.

<a href="#Foo" onclick="return runMyFunction();">Do it!</a>

và

function runMyFunction() {
  //code
  return true;
}

Bằng cách này, bạn sẽ thực thi hàm của bạn VÀ bạn sẽ theo liên kết VÀ bạn sẽ theo liên kết chính xác sau khi hàm của bạn được chạy thành công.

Nếu liên kết chỉ nên thay đổi vị trí nếu chạy hàm thành công, thì hãy thực hiện onclick="return runMyFunction();"và trong hàm, bạn sẽ trả về true hoặc false.

Nếu bạn chỉ muốn chạy hàm và sau đó để thẻ liên kết thực hiện công việc của nó, chỉ cần xóa return falsecâu lệnh.

Một lưu ý nhỏ là bạn có thể nên sử dụng trình xử lý sự kiện thay thế, vì JS nội tuyến không phải là cách hoạt động rất tối ưu.

Khi thực hiện Cấu trúc HTML sạch, bạn có thể sử dụng cấu trúc này.

//Jquery Code
$('a#link_1').click(function(e){
  e . preventDefault () ;
  var a = e . target ;
  window . open ( '_top' , a . getAttribute ('href') ) ;
});

//Normal Code
element = document . getElementById ( 'link_1' ) ;
element . onClick = function (e) {
  e . preventDefault () ;
  
  window . open ( '_top' , element . getAttribute ('href') ) ;
} ;

<a href="#Foo" id="link_1">Do it!</a>