Khi sự kiện chuột và chuột phải không bằng một cú nhấp chuột

Question

Tôi đã sử dụng một số nút trong một thời gian có hiệu ứng bị giảm khi chúng được nhấp bằng cách sử dụng vị trí tương đối và trên cùng: 1px trong: pseudo-class đang hoạt động .

Tôi gặp sự cố với các sự kiện nhấp không kích hoạt và nó hóa ra là do sự kiện chuột và chuột không kích hoạt trên cùng một phần tử. Tôi đã làm một chút không quan trọng để đảm bảo rằng phần tử bên trong nhất bao phủ toàn bộ nút và phát hiện ra vấn đề vẫn còn.

Nếu tôi nhấp chuột phải ở đầu văn bản thì liên kết sẽ nhảy xuống (kích hoạt sự kiện được tổ chức) và sau đó sao lưu (kích hoạt sự kiện di chuột) nhưng nhấp chuột không xảy ra. Nếu tôi nhấp độc đáo ở giữa văn bản hoặc cách xa văn bản thì tất cả đều ổn.

Điều duy nhất tôi có thể nghĩ đến ở đây là sự kiện được tổ chức là kích hoạt trên textNode và mouseup được kích hoạt trên phần tử neo như là textNode không còn nằm dưới con trỏ. Bắt các đối tượng sự kiện và nhìn vào các mục tiêu bằng cách sử dụng firebug cho thấy đây không phải là trường hợp nhưng tôi thực sự không thể nghĩ ra một lời giải thích khác. Đọc xung quanh một chút Tôi có thể tìm thấy một số đề cập đến các sự kiện bắn trên textNodes trong Safari nhưng không có gì về sự không phù hợp này.

Đoạn mã sau sẽ cho phép bạn sao chép sự cố. Hãy nhớ rằng, bạn phải nhấn chuột phải ở phía trên cùng của văn bản, hoặc một điểm ảnh hoặc hai ở trên, và vấn đề này chỉ xảy ra với một dãy pixel:

<style> 
a.button-test { 
display: inline-block; 
padding: 20px; 
background: red; 
} 
.button-test:active { 
position: relative; 
top: 1px; 
} 
</style> 
<a class="button-test" href="#">Clickedy click</a> 

Rối tung xung quanh với CSS, không sử dụng inline-block, tăng chiều cao dòng thay vì padding vv dường như không có tác dụng ở đây. Tôi đã thử nhiều kết hợp. Hầu hết các thử nghiệm của tôi đã được thực hiện trong Firefox để cho phép tôi liên kết với các sự kiện và ghi lại những gì đang xảy ra thông qua firebug nhưng tôi cũng gặp phải vấn đề này trong các trình duyệt khác.

Có ai có bất kỳ nguồn cảm hứng nào mà họ có thể cung cấp về điều này ngoài việc mất đi hoạt động nhảy không? Tôi thực sự muốn giữ hiệu ứng này nếu tôi có thể.

nhờ Big,

Dom (không ý định chơi chữ)

Answer 1

Nó dễ dàng hơn để tái tạo vấn đề này nếu bạn thay đổi phong cách để top: 10px

Answer 2

Dưới đây là cách giải quyết của tôi sử dụng một sự kiện tùy chỉnh với jQuery

var buttonPressed; 
// Track buttonPressed only on button mousedown 
$(document).on('mousedown', 'button', function (e) { 
    // Make sure we store the actual button, not any contained 
    // element we might have clicked instead 
    buttonPressed = $(e.target).closest('button'); 
}); 
// Clear buttonPressed on every mouseup 
$(document).on('mouseup', function (e) { 
    if (buttonPressed) { 
     // Verify it's the same target button 
     var target = $(e.target).closest('button'); 
     if (target.is(buttonPressed)) { 
      buttonPressed.trigger('buttonClick'); 
     } 
     buttonPressed = null; 
    } 
}); 

$('button').on('buttonClick', function (e) { 
    // Do your thing 
}); 

Chỉ cần đảm bảo bạn không xử lý cả nhấp chuột và nút gốcNhấp sự kiện.