nhấp chuột giữa (tab mới) và liên kết javascript

Question

Tôi phụ trách một trang web tại nơi làm việc và gần đây tôi đã thêm yêu cầu ajaxy để làm cho nó nhanh hơn và đáp ứng nhanh hơn. Nhưng nó đã gây ra một vấn đề.

Trên các trang của tôi, có một bảng chỉ mục ở bên trái, như một menu. Một khi bạn đã nhấp vào nó, nó làm cho một yêu cầu lấp đầy phần còn lại của trang. Bất cứ lúc nào bạn có thể nhấp vào một mục khác của chỉ mục để tải một trang khác.

Trước khi thêm javascript, bạn có thể nhấp chuột giữa (mở tab mới) cho mỗi mục của chỉ mục, cho phép tải các trang khác trong khi tôi đang xử lý một trong số các trang đó. Nhưng kể từ khi tôi đã thay đổi tất cả các liên kết để được yêu cầu ajax, bây giờ họ thực hiện một số javascript thay vì được liên kết thực sự. Vì vậy, họ chỉ mở các tab trống khi tôi nhấp vào giữa chúng.

Có cách nào kết hợp cả hai chức năng: liên kết kích hoạt javascript khi nhấp chuột trái hoặc tab mới khi nhấp giữa? Nó có phải là một số javascript xấu xí mà bắt mỗi nhấp chuột và đối phó với họ cho phù hợp?

Cảm ơn.

Answer 1

Có thể, mỗi lần tôi có thể cung cấp hai liên kết, một liên kết sẽ kích hoạt javascript và một liên kết khác là liên kết thực sự cho phép nhấp chuột giữa. Tôi đoán, một trong số đó sẽ phải là một hình ảnh để tránh quá tải chỉ mục.

Answer 2

Nó sẽ yêu cầu một số thử nghiệm, nhưng tôi tin rằng hầu hết các trình duyệt không thực thi trình xử lý nhấp chuột khi bạn nhấp vào chúng, nghĩa là chỉ sử dụng liên kết.

Tuy nhiên, không phải chức năng xử lý của bạn cần trả về false để đảm bảo các liên kết này không được sử dụng khi thường nhấp vào.

EDIT: Felt này có thể sử dụng một ví dụ:

<a href="/Whatever/Wherever.htm" onclick="handler(); return false;" /> 

Answer 3

Yes. Thay vì:

<a href="javascript:code">...</a> 

Làm điều này:

<a href="/non/ajax/display/page" id="thisLink">...</a> 

Và sau đó trong JS của bạn, treo vào liên kết qua đó là ID để thực hiện cuộc gọi AJAX. Hãy nhớ rằng bạn cần phải dừng sự kiện nhấp chuột từ sủi bọt lên. Hầu hết các khung công tác đều có trình diệt sự kiện được xây dựng mà bạn có thể gọi (chỉ cần nhìn vào lớp Sự kiện).

Dưới đây là xử lý sự kiện và sự kiện-killer trong jquery:

$("#thisLink").click(function(ev, ob) { 
    alert("thisLink was clicked"); 
    ev.stopPropagation(); 
}); 

Tất nhiên bạn có thể có rất nhiều thông minh hơn, trong khi tung hứng những thứ như thế này nhưng tôi nghĩ rằng điều quan trọng là để nhấn mạnh rằng phương pháp này là nên sạch hơn nhiều so với sử dụng thuộc tính onclick.

Giữ JS của bạn trong JS!

Answer 4

Sự kiện onclick sẽ không được kích hoạt cho loại nhấp chuột đó, vì vậy bạn cần phải thêm thuộc tính href thực sự hoạt động. Một cách có thể thực hiện việc này bằng cách thêm một số #bookmark vào URL để chỉ ra trang đích mà trạng thái được yêu cầu là gì.

Answer 5

Có, bạn cần phải tra cứu nâng cao tiến bộ và không phô trương Javascript, và mã trang web của bạn để làm việc với bật Javascript đầu tiên và sau đó thêm các chức năng Javascripts sau khi bạn có trang web cơ bản làm việc.

Answer 6

<a href="/original/url" onclick="return !doSomething();">link text</a> 

Để biết thêm thông tin và xem giải thích chi tiết my answer in another post.

Answer 7

Tôi thích cách tiếp cận của Oli nhưng không phân biệt được giữa các nhấp chuột trái và giữa. kiểm tra trường "which" trên eventArgs sẽ cho bạn biết.

$(".detailLink").click(function (ev, ob) { 
    //ev.which == 1 == left 
    //ev.which == 2 == middle 
    if (ev.which == 1) { 
     //do ajaxy stuff 

     return false; //tells browser to stop processing the event 
    } 
    //else just let it go on its merry way and open the new tab. 
});