CSS：隠しオブジェクトはクリック可能ですか？

Question

HTML要素のスタイルのvisibilityプロパティがhiddenに設定されている場合は、それでもクリックできますか？

displayプロパティがnoneに設定されている場合、要素はDOMツリーの一部ではないため、問題はありません。しかし、hidden要素がまだマウスイベントに応答するかどうかは疑問でした。

Answer 1

display: noneは、まだDOMの一部分ですです。ビューポートにレンダリングされません。

visibility: hiddenの要素をクリックすると、イベントはでなく、が発生します。

jsFiddle。視認性を隠しに設定されている場合、このようなハイパーリンクとして

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

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

<div>abc</div>

Answer 2

号

要素をクリックすることができない（リンクが続きます）。同様に、onclickイベントは発生しません。

Answer 3

divを非表示にするか、noneにすると、ユーザーにクリック不可にするだけです。 しかし、現実にはまだdomの要素であり、このような別のJavaスクリプト/ jqueryでクリックすることができます。

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

jsfiddle