Tại sao không thể là một sự kiện mouseup ngăn chặn một sự kiện click

Question

jsfiddle

<div class='wrapper'> 
    <button class='child'>Click me</button> 
</div> 

function h(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    e.stopImmediatePropagation(); 
    alert(e.type); 
    return false; 
} 

document.querySelector('.wrapper').addEventListener('mouseup', h, false); 
document.querySelector('.child').addEventListener('click', h, false); 

Tôi hy vọng điều này để ngăn chặn sự kiện nghe tiếng 'click' từ bắn, nhưng nó không. Tuy nhiên, việc thay đổi mouseup thành mousedown thực tế sẽ ngăn sự kiện nhấp chuột.

Tôi cũng đã cố gắng đặt đối số useCapture thành true và cũng không tạo ra hành vi mong muốn với mouseup. Tôi đã thử nghiệm điều này trên Chrome và Firefox. Trước khi tôi phát hiện lỗi, tôi đã tìm ra ở đây.

Đây có phải là lỗi trong trình duyệt hiện tại hay là hành vi được ghi lại?

Tôi đã xem lại W3C standard (DOM level 2) và tôi không thể tìm thấy bất kỳ điều gì có thể giải thích hành vi này, nhưng tôi có thể đã bỏ lỡ điều gì đó. Trong trường hợp cụ thể của tôi, tôi đang cố tách hai đoạn mã để nghe các sự kiện trên cùng một phần tử và tôi đã sử dụng các sự kiện chụp ở phần có mức độ ưu tiên sẽ là cách thanh lịch nhất để giải quyết vấn đề này, nhưng sau đó tôi gặp phải vấn đề này. FWIW, tôi chỉ phải hỗ trợ các phiên bản chính thức được hỗ trợ của FF và Chrome (bao gồm ESR cho FF).

Answer 1

Check out this quirksmode article

Các click sự kiện:

cháy khi một mousedown và MouseUp sự kiện xảy ra trên cùng một nguyên tố.

Vì vậy, khi click chuột được phát hành, cả mouseup và click sự kiện được bắn, click không chờ cho mouseup gọi lại để kết thúc. Hầu như luôn luôn, mouseup và click có thể được sử dụng đồng nghĩa.

Để hủy click, như bạn chứng minh, bạn có thể trở false trong callback mousedown sự kiện, giúp ngăn chặn sự kiện click từ bao giờ hoàn thành.