CSS: Đối tượng ẩn có thể nhấp được không?

Question

Nếu thuộc tính visibility kiểu dáng của một phần tử HTML được đặt thành hidden, nó vẫn có thể nhấp được không?

Khi thuộc tính display được đặt thành none, phần tử này thậm chí không phải là một phần của cây DOM, do đó, đó không phải là vấn đề. Nhưng tôi đã tự hỏi nếu một yếu tố hidden vẫn phản ứng với các sự kiện chuột.

Answer 1

Với display: none nó là vẫn là một phần của DOM. Nó không được hiển thị trong khung nhìn.

Đối với các nhấp chuột trên các thành phần có visibility: hidden, các sự kiện là không phải là được kích hoạt.

jsFiddle.

$('div').click(function() { 
 
    alert('Hello') 
 
});

div { 
 
    width: 100%; 
 
    height: 100%; 
 
    visibility: hidden; 
 
}

<div>abc</div>

Answer 2

số

Một yếu tố chẳng hạn như một siêu liên kết không thể được bấm (và liên kết sau) nếu khả năng hiển thị được thiết lập để ẩn. Tương tự, các sự kiện onclick sẽ không được kích hoạt.

Answer 3

Làm cho div bị ẩn hoặc hiển thị không có gì khiến cho nó không thể nhấp vào người dùng. Nhưng trong thực tế nó vẫn là một phần tử trong dom và bạn có thể nhấp vào nó với một tập lệnh java/jquery như thế này.

$('div').click(function() { 
    alert('Hello') 
}); 
$('div').click(); 

jsfiddle