web-dev-qa-db-ja.com

CSS：非表示のオブジェクトはクリック可能ですか？

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

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

cssvisibilitydisplay
51
euphoria83

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

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

jsFiddle 。

$('div').click(function() {
    alert('Hello')
});
div {
    width: 100%;
    height: 100%;
    visibility: hidden; 
}
<div>abc</div>
67
alex

Divを非表示または表示なしにすると、ユーザーはクリックできなくなります。しかし、実際にはまだdomの要素であり、別のJavaこのようなscript/jqueryでクリックできます。

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

jsfiddleenter image description here

6
Jin Thakur

番号。

可視性が非表示に設定されている場合、ハイパーリンクなどの要素をクリックすることはできません（そしてリンクをたどります）。同様に、onclickイベントは発生しません。

5
ADW