Ngăn chặn "xâm nhập" ý định nhấp vào liên kết khi áp dụng chức năng tùy chỉnh cho sự kiện nhấp

Question

Ví dụ: có một số mã JavaScript có trình xử lý nhấp chuột xác định nơi người dùng sẽ được chuyển hướng đến. Giả sử nó chỉ là một liên kết ngẫu nhiên chuyển hướng được tính khi người dùng nhấp vào liên kết.

Dưới đây là một số kịch bản:

• Nếu người dùng nhấp chuột trái vào liên kết, mục đích của người sử dụng là để giữ cho chuyển hướng trong cùng một tab, trong đó hoạt động tốt với window.location.

• Nếu người dùng nhấp vào giữa liên kết này, người dùng có vẻ như trang web đã chiếm đoạt nhấp chuột giữa và đơn giản là bỏ qua nó, chuyển hướng người dùng trong cùng một tab thay vì tab mới.

• Ngoài ra, khi ai đó vừa nhận xét (và xóa nhận xét?), Một trường hợp khác là phím bổ trợ cũng có thể đề xuất trình duyệt mở tab mới hoặc thậm chí là cửa sổ mới.

• Một đề xuất khác là có thể mở liên kết trong tab hoặc cửa sổ mới thông qua menu ngữ cảnh. Điều này là ít quan trọng, nhưng chắc chắn cùng một vấn đề khả năng sử dụng.

Tôi đã gặp sự cố này trên nhiều trang web, đặc biệt là đối với tôi, Google Analytics, nơi hầu như mỗi lần tôi nhấp chuột giữa, hiệu ứng này xảy ra.

Một ví dụ tốt về những gì một số mã JavaScript cần là:

Process một số dữ liệu, sau đó gửi đi một yêu cầu XHR rằng cần phải được hoàn tất trước khi cho phép người dùng tiếp tục liên kết họ nhấp trên.

Bạn làm cách nào để giải quyết vấn đề này? ví dụ. có cách nào để phát hiện xem người dùng có mong đợi liên kết xuất hiện trong tab mới hay không và liệu có thể tải lên một tab mới không? Có lẽ tôi đang nghĩ về điều này một cách sai lầm?

Answer 1

event.button có thể được sử dụng để xác định nút chuột nào được nhấp. Nút Trung trả về 1.

Đối tượng event cũng chứa các thuộc tính event.ctrlKey, event.altKey và event.shiftKey mà là tự giải thích. Giá trị của chúng là true nếu các phím tương ứng được nhấn và false nếu không.

---

Các hành vi mà bạn muốn đạt được: http://jsfiddle.net/pratik136/nCdhv/9/

html:

<a id="smart" href="http://www.bbc.co.uk/">Click</a>​ 

js:

$(function() { 
    $('#smart').on('click', function(event) { 
     if (event && event.button && event.button === 1) { 
      event.preventDefault(); 
      window.open($('#smart').attr('href'), '_blank'); 
      return false; 
     } else { 
      return true; 
     } 
    }); 
});​ 

---

src: https://developer.mozilla.org/En/DOM/Event.button
hỗ trợ trình duyệt: http://help.dottoro.com/ljaxplfi.php

Answer 2

Để có được hành vi nhất quán trên các trình duyệt, hãy đặt thuộc tính href của liên kết thành giá trị thích hợp trước khi người dùng nhấp vào nó. Sau đó, tùy thuộc vào người dùng để xác định xem liên kết có nên được mở trong cùng một cửa sổ hay không, một cửa sổ mới hoặc một tab.

ví dụ:

<a href="http://www.apple.com" onclick="this.href='http://www.google.com'">Apple</a> 

Trong IE 9 và Firefox, nhấp chuột trái mở Google, ctrl + nhấp chuột trái sẽ mở Apple trong tab mới, như nhấp chuột phải và chọn "Mở liên kết trong tab mới". Cách duy nhất để khắc phục đó là đặt href trước khi người dùng nhấp vào liên kết.

Sự kiện nhấp chuột có thể sẽ không được gửi đi cho các nhấp chuột giữa hoặc nhấp chuột phải trên các liên kết.

Nếu liên kết đã được nhấp và nút quay lại được sử dụng để quay lại trang, href của liên kết có thể là bản gốc hoặc vẫn được sửa đổi theo tập lệnh.

Điểm mấu chốt là để cho các liên kết hoạt động như liên kết. Nếu một số hành vi khác là bắt buộc, hãy sử dụng các nút hoặc một đối tượng giao diện người dùng khác.

Answer 3

Điều này không trả lời chính xác câu hỏi mà là câu hỏi cơ bản. Một người bạn đời của tôi nhận ra rằng $.ajax có một tùy chọn async: false.

$(function() { 
    $('a').click(function(e) { 
     $.ajax({url: '/', async: false}).done(function(d) { alert('hello ' + d) }) 
    }) 
})​ 

Fiddle: http://jsfiddle.net/gakman/7qdXE/

này sẽ chặn các sự kiện href="" nhấp chuột cho đến khi phản ứng ajax đã trở lại, tiếp tục với bất cứ tab/cửa sổ liên kết được đội đầu.

Ông cũng nói "đây là điều tồi tệ nhất từ ​​trước đến nay", điều này hoàn toàn đúng.