Làm cho phần tử không thể nhấp được (nhấp vào những thứ đằng sau nó)

92

Tôi có một hình ảnh cố định phủ lên một trang khi người dùng đang thực hiện thao tác cuộn màn hình cảm ứng (di động).

Tôi muốn đặt hình ảnh đó "không thể nhấp vào" hoặc "không hoạt động" hoặc bất cứ điều gì, để nếu người dùng chạm và kéo từ hình ảnh đó, trang đằng sau nó vẫn cuộn như thể hình ảnh không có "chặn" tương tác.

Điều này có khả thi không? Nếu cần, tôi có thể cố gắng cung cấp ảnh chụp màn hình thể hiện ý tôi muốn nói.

Cảm ơn!

— hannebaumsaway
nguồn

181

Đặt CSS - pointer-events: nonesẽ xóa mọi tương tác của chuột với hình ảnh. Được hỗ trợ khá tốt trong tất cả ngoại trừ IE.

Đây là danh sách đầy đủ các giá trị pointer-eventscó thể sử dụng.

— Chris Brown
nguồn

2

Hoàn hảo! Tôi đã không chạy qua pointer-eventstrước đây, đây chính xác là những gì tôi đang tìm kiếm. Cảm ơn bạn!

— hannebaumsaway

1

@Dusty Kinda có lý, bạn đang tắt tương tác chuột nhưng vẫn muốn tương tác chuột. Trường hợp sử dụng cụ thể của bạn là gì? Từ góc độ người dùng có vẻ phản trực quan vì con trỏ ngụ ý phần tử có thể nhấp được. Nếu bạn ném cùng một JSFiddle, tôi có thể xem qua.

— Chris Brown

@ChrisBrown, việc thay đổi con trỏ có một chút chen lấn. Đây là một chút về những gì tôi đã nghĩ ra với jsfiddle.net/cxwvdos0 Loại điên rồ chỉ để tắt một nút trong một giây và không thay đổi con trỏ. jQuery unbindvà bindtôi nghĩ sẽ hoạt động nếu tôi muốn chuyển đổi các hàm ẩn danh của mình. Cảm ơn vì đã phản hồi!

— Bụi bặm

17

Sự kiện con trỏ CSS là những gì bạn muốn xem. Trong trường hợp của bạn, hãy đặt con trỏ-sự kiện thành "không có". Hãy xem JSFiddle này để làm ví dụ ... http://jsfiddle.net/dppJw/1/

Lưu ý rằng nhấp đúp vào biểu tượng sẽ vẫn cho biết bạn nhấp vào đoạn văn.

div.child {
    ...    
    background: #fff;
    pointer-events: none //This line is the key!
}

— Terry
nguồn

1

Cảm ơn vì ví dụ!

— hannebaumsaway

Nhấp một lần vào * và ví dụ mã (nhấp vào biểu tượng) không hoạt động đối với tôi trong FF 68.0.

— Andrew

3

Nếu bạn muốn sử dụng JavaScript:

document.getElementById("x").style.pointerEvents = "none";

<a href="https://www.google.com" id="x" />Unclickable Google Link</a>
<br>
<a href="https://www.google.com" id="" />Clickable Google Link</a>

Mở rộng đoạn mã

— Husam Ebish
nguồn