Thêm thuộc tính con trỏ CSS khi sử dụng “pointer-event: none”

Tôi đang cố gắng vô hiệu hóa một liên kết cụ thể và áp dụng kiểu con trỏ nhưng lệnh CSS này cursor: text;sẽ không có hiệu lực. Con trỏ luôn được mặc định. Tôi đang sử dụng phiên bản Firefox mới nhất.

CSS:

pointer-events: none !important;
cursor: text;
color: Blue;

Việc sử dụng pointer-events: nonesẽ vô hiệu hóa tất cả các tương tác của chuột với phần tử đó. Nếu bạn muốn thay đổi thuộc cursortính, bạn sẽ phải áp dụng các thay đổi cho phần tử mẹ. Bạn có thể bao bọc liên kết bằng một phần tử và thêm thuộc cursortính vào nó.

Ví dụ ở đây

HTML

<span class="wrapper">
    <a href="#">Some Link</a>
</span>

CSS

.wrapper {
    position: relative;
    cursor: text;  /* This is used */
}
.wrapper a {
    pointer-events: none;
}

Tuy nhiên, có một số mâu thuẫn trình duyệt. Để làm cho điều này hoạt động trong IE11, có vẻ như bạn cần một phần tử giả. Phần tử giả cũng cho phép bạn chọn văn bản trong FF. Thật kỳ lạ, bạn có thể chọn văn bản trong Chrome mà không cần nó.

Ví dụ cập nhật

.wrapper:after {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
}

Đã khá lâu kể từ câu hỏi ban đầu, nhưng đây là giải pháp của tôi mà không có bất kỳ phần tử gói nào và con trỏ không có sự kiện con trỏ:

<!-- Add tabindex="-1" so that element cannot be reached by keyboard -->
<a href="url" class="disabled" tabindex="-1" onfocus="this.blur()">Disabled link</a>

CSS:

/* Adding cursor just works: */
.disabled {
    cursor: not-allowed;
}

/* Makes link non-clickable: */
.disabled:active {
    pointer-events: none;
}

Ví dụ CodePen

BIÊN TẬP:

• Chrome đã bắt đầu thêm tiêu điểm vào nhấp chuột vào các phần tử có thuộc tính tabindex (ngay cả với tabindex = "- 1"). Giải pháp nhanh nhất là đặt thành onfocus="this.blur()"phần tử không tập trung.
• Bạn cần ngăn phần tử lấy nét nếu không nó có thể được kích hoạt bằng phím enter

Bằng cách chỉ định pointer-events:nonebạn đang tích cực khai báo rằng không có tương tác chuột giữa phần tử và con trỏ. Do đó, nó cũng không thể có con trỏ - nó vô hình đối với tất cả các hành vi của chuột.

Bằng chứng được tìm thấy ở đây .

Loại bỏ pointer-events: none !important;. Tắt liên kết bằng JavaScript:

anchorElement.onclick = function(){
  return false;
}

Nếu bạn không biết JavaScript anchorElementlà chính Node hay Element. Cách phổ biến nhất để có được Phần tử là sử dụng idthuộc tính HTML . Giả sử chúng ta có:

<a id='whatever' href='#'>Text Here</a>

Mã của bạn có thể là:

document.getElementById('whatever').onclick = function(){
  return false;
}

Có một số cách khác để có được Nút.

Trường hợp sử dụng của tôi là một phần tử có thể kéo không thể có bất kỳ sự kiện con trỏ nào cũng như bất kỳ phần tử mẹ nào có sự kiện con trỏ.

Tôi đã giải quyết nó bằng cách áp dụng một cách có điều kiện kiểu toàn cục chỉ buộc một con trỏ chộp trong khi kéo. (Tôi đang sử dụng React và các thành phần được tạo kiểu, nhưng logic tương tự có thể được áp dụng trên vani js).

const SetDraggingCursor = createGlobalStyle`
  * {
    cursor: grabbing !important;
  }
`;

// ...

{isDragging && <SetDraggingCursor />}

bạn có thể tạo một div khác và định vị nó chính xác trên div cuối cùng của bạn và tạo một css như sau:

.example{
    background-color: rgba(255, 255, 255, 0); //opacity:0
    z-index: 1;
    cursor: not-allowed;
}

Thay vì trình bao bọc, điều này cũng có thể được thực hiện với CSS thuần túy từ bên trong. (Tôi sử dụng điều này với thành phần web material, vì vậy mã phức tạp hơn một chút.)

button:disabled {
    > * {
        cursor: not-allowed;
        pointer-events: initial;
    }

    &::before {
        background-color: #fff0;
    }

    &::after {
        background-color: #fff0;
    }
}

<button>
    <svg .../>
</button>

Tôi cũng đã cố gắng ::beforevà ::aftervới button:disabledtrực tiếp, nhưng chỉ là không thể làm cho nó xảy ra ...