web-dev-qa-db-ja.com

要素をクリックできないようにする（背後にあるものをクリックする）

ユーザーがタッチスクリーン（モバイル）をスクロールしているときにページにオーバーレイする固定画像があります。

その画像を「クリック不可」または「非アクティブ」などにしたいので、ユーザーがその画像に触れてドラッグすると、画像が存在しないかのようにその背後のページが引き続きスクロールして、インタラクションを「ブロック」します。

これは可能ですか？必要に応じて、私が意味するものを例示するスクリーンショットを提供することもできます。

ありがとう！

htmlcssmobilescrolltouch
70
hannebaumsaway

CSSの設定-pointer-events: noneは、画像に対するマウスの操作をすべて削除する必要があります。 IE以外のすべてでかなりよくサポートされています。

完全なリストはこちらpointer-eventsが取りうる値。

140
Chris Brown

CSSポインターイベントは、見たいものです。あなたの場合、ポインターイベントを「なし」に設定します。例については、このJSFiddleをご覧ください... http://jsfiddle.net/dppJw/1/

アイコンをダブルクリックしても、段落をクリックすると表示されることに注意してください。

div.child {
    ...    
    background: #fff;
    pointer-events: none //This line is the key!
}
13
Terry

JavaScriptを使用する場合：

document.getElementById("x").style.pointerEvents = "none";
<a href="https://www.google.com" id="x" />Unclickable Google Link</a>
<br>
<a href="https://www.google.com" id="" />Clickable Google Link</a>
2
Husam Ebish