Tắt onclick với CSS :: Có thể?

Question

Tôi muốn vô hiệu hóa sự kiện onclick bằng CSS. Khả thi?

Hãy nói rằng tôi có

<div id="btnCopy" class="button" onclick="btnCopy(this);"><img src="copy.png"></div> 

và bằng cách thêm lớp "tàn tật"

document.getElementById("btnCopy").className += " disabled"; 

Tôi muốn tắt sự kiện onclick cho các phần tử này, vì vậy onclick="btnCopy(this);" sẽ không hoạt động.

Và bằng cách loại bỏ "tàn tật" lớp

document.getElementById("btnCopy").className = 
    document.getElementById("btnCopy").className.replace(/(?:^|\s)disabled(?!\S)/, ''); 

nó sẽ trở lại bình thường, vì vậy onclick Sự kiện này sẽ được kích hoạt.

Answer 1

Thêm một số Javascript vào hàm btnCopy của bạn để kiểm tra xem phần tử tham số có thuộc lớp disabled hay không.

Sử dụng CSS để thay đổi hành vi của JavaScript là không thể. CSS là để tạo kiểu cho các phần tử HTML, JavaScript là để xử lý hành vi của các sự kiện và trang web. CSS và JavaScript là hai điều rất khác nhau. Điều duy nhất có thể với CSS là ngăn người dùng nhấp vào một đầu vào (ví dụ: nút). Với giải pháp CSS, bạn không vô hiệu hóa mã trong sự kiện onclick. Bạn chỉ vô hiệu hóa khả năng của người dùng kích hoạt sự kiện onclick.

Tuy nhiên, có nhiều cách để thay đổi nội dung trên một trang (sử dụng JavaScript nhiều hơn hoặc với một số plugin cho trình duyệt của bạn), có thể nhấp vào nút này mặc dù phần tử giả CSS của bạn. Đó là lý do tại sao sử dụng CSS cho này không được khuyến nghị.

Answer 2

Nếu bạn đang sử dụng javascript để thêm và xóa lớp thì tại sao không chỉ sử dụng nó để bật tắt sự kiện nhấp?

Answer 3

Đó là hackish, nhưng tôi sẽ đề nghị sử dụng pseudo-yếu tố:

Trên một nút với một lớp bị tắt, bạn có thể tạo ra một giả yếu tố bao gồm các nút do đó, nó không nhấp được.

Nhưng nó sẽ có ý nghĩa hơn để sử dụng javascript kể từ khi bạn đã sử dụng đó để thêm và loại bỏ các lớp học ...

EDIT: Không được đề xuất ở tất cả, nhưng ở đây bạn đi:

#btnCopy {position:relative;z-index:1;} 

.disabled:before { 
    content:" "; 
    display:block; 
    position:absolute; 
    top:0;left:0;right:0;bottom:0; 
    z-index:10; 
} 

Answer 4

Nếu bạn muốn thêm hoặc xóa lớp "đã tắt", bạn cũng có thể kiểm tra lớp này trong trình xử lý sự kiện của mình và hơn là không có phần tử nào bị vô hiệu hóa lớp.

Answer 5

<div id="btnCopy" class="button" 
    onClick="if(this.className.indexOf('disabled') == -1){btnCopy(this);}"> 
    <img src="copy.png"> 
</div> 

nó sẽ phải được thực hiện bằng Javascript. An if(indexOf('disabled') == -1) nên thực hiện thủ thuật.

Answer 6

Một cách để thực hiện nó hoàn toàn thông qua CSS đang hiển thị lớp phủ ẩn không thể nhấp được khi di chuột qua.

Demo: http://jsfiddle.net/FNVmh/1/

Answer 7

Trong một số trình duyệt bạn có thể đặt pointer-events: none, nhưng điều đó sẽ vô hiệu hóa tất cả các sự kiện chuột không chỉ nhấp chuột. Xem: https://developer.mozilla.org/en/CSS/pointer-events/

Answer 8

Bạn có thể sử dụng javascript để tắt các nút onclick sự kiện bằng cách thêm dòng javascript này.

Tùy chọn tốt nhất có thể là sử dụng jQuery và kiểm tra xem btnCopy có lớp 'bị tắt' hay không.

if(!$('btnCopy').hasClass('disabled')){ 
    //Add code to copy text here 
} 

Chúc may mắn!

Answer 9

Bạn có thể thực hiện việc này.

pointer-events: none; 
cursor: default; 

hơn here

Answer 10

Đây là cách Bootstrap làm điều đó.

.btn.disabled, .btn[disabled] { 
    cursor: not-allowed; 
    opacity: 0.65; 
    filter: alpha(opacity=65); 
    box-shadow: none; 
} 

Bạn chỉ có thể giữ cursor: not-allowed; và nếu bạn không cần phải thiết lập lại trong những phong cách sau đó bạn loại bỏ chúng opacity: 0.65; filter: alpha(opacity=65); box-shadow: none;