web-dev-qa-db-ja.com

HTMLの「オーバーレイ」により、クリックがその背後の要素に到達します。

（任意のグラフィックスを描画するために）Webページの上部に要素をオーバーレイしようとしていますが、すべての上に要素の内部にスタックできるようになりましたが、これによりユーザーがクリックできなくなりますリンク/ボタン/など。そのコンテンツをすべての上に浮かせる方法はありますか（半透明なので、背後にあるものを見ることができます）、ユーザーにその下のレイヤーと対話させることができますか？

DOMイベントモデルに関する多くの情報を見つけましたが、そもそもボタンやその他の「ネイティブ」コントロールがクリックを取得できないという問題に対処するものはありません。

javascripthtmldomeventsclick
161
Steven Schlansker

私がやった愚かなハックは、要素の高さをゼロに設定することでしたが、overflow：visible;これをpointer-events：noneと組み合わせます。すべての基盤をカバーしているようです。

.overlay {
    height:0px;
    overflow:visible;
    pointer-events:none;
    background:none !important;
}
114
Flatliner DOA

pointer-events: none;をオーバーレイに追加します。

元の答え：私の提案は、クリックイベントをオーバーレイでキャプチャし、オーバーレイを非表示にし、クリックイベントを再起動してから、もう一度オーバーレイを表示することです。ただし、フリッカー効果が得られるかどうかはわかりません。

[更新]まさにこの問題と私の解決策がまさにこの投稿に登場しました： " Forwarding Mouse Events Through Layers "。私はおそらくOPでは少し遅れていることを知っていますが、将来この問題を抱えている人のために、私はそれを含めるつもりです。

42
Russell Leggett

記録のための代替アプローチは、クリック可能なレイヤーをオーバーレイにすることです。それを半透明にし、「オーバーレイ」画像を配置しますbehind it（やや直感に反して、「オーバーレイ」画像は不透明である）。実行しようとしている内容によっては、クリック可能性の問題を回避しながら（画像とクリック可能なレイヤーを半透明に重ねた）まったく同じ視覚効果を得ることができます（「オーバーレイ実際にはバックグラウンドにあります）。

6
Nick F

他の誰かが同じ問題に直面している場合、私が満足していると感じる唯一の解決策は、キャンバスですべてを覆い、すべてのクリック可能な要素のZ-indexを上げることでした。あなたはそれらを描くことはできませんが、少なくともクリック可能です...

5
Steven Schlansker

私のチームはこの問題に遭遇し、非常にうまく解決しました。

  • クラス「パススルー」または何かを、クリック可能にしてオーバーレイの下にある各要素に追加します。
  • 「.passthrough」要素ごとにdivを追加し、その親の上に正確に配置します。クラス「element-overlay」をこの新しいdivに追加します。
  • ".element-overlay" cssには高いz-index（ページのオーバーレイの上）があり、要素は透明である必要があります。

これにより、「。element-overlay」のイベントが「.passthrough」にバブルアップするため、問題が解決するはずです。それでもまだ問題がある場合（これまでのところ表示されていません）、バインディングをいじることができます。

これは、@ jvenemaのソリューションの拡張機能です。

これのいいところは

  • すべてのイベントをすべての要素に渡すわけではありません。欲しいものだけ。 （@jvenemaの引数を解決）
  • すべてのイベントが適切に機能します。 （たとえば、ホバー）。

問題がある場合は、詳しく教えてください。

4
guy mograbi

背面のボタン/アンカーを表示したままにするために、不透明度が設定されたオーバーレイを使用できますが、そのオーバーレイを要素の上に配置すると、クリックできなくなります。

3
yoda

一般的に、これは素晴らしいアイデアではありません。シナリオを考えて、悪意がある場合は、「オーバーレイ」の下にすべてを隠すことができます。次に、ユーザーがbankofamerica.comに移動するリンクをクリックすると、代わりにmyevilsite.comに移動する非表示のリンクがトリガーされます。

とはいえ、イベントバブリングは機能し、アプリケーション内にある場合、大したことではありません。次のコードは一例です。アラートが赤いエリアに設定されていても、青いエリアをクリックするとアラートがポップアップします。イベントはPARENT要素を介して伝播するため、オレンジ色の領域は機能しないことに注意してください。したがって、オーバーレイはinsideクリックを監視している要素である必要があります。あなたのシナリオでは、あなたは運が悪いかもしれません。

<html>
<head>
</head>
<body>
    <div id="outer" style="position:absolute;height:50px;width:60px;z-index:1;background-color:red;top:5px;left:5px;" onclick="alert('outer')"> 
        <div id="nested" style="position:absolute;height:50px;width:60px;z-index:2;background-color:blue;top:15px;left:15px;">
        </div>
    </div>
    <div id="separate" style="position:absolute;height:50px;width:60px;z-index:3;background-color:orange;top:25px;left:25px;">
    </div>
</body>
</html>
2
jvenema

IEではこれはどうですか？：

onmousedown：イベントをオーバーレイする可能性のあるすべての要素を非表示にします。 display：none visibility：hiddenは実際には機能しないため、固定されたピクセル数でオーバーレイdivを画面から押し出します。しばらくしてから、同じピクセル数でオーバーレイするdivを押し戻します。

onmouseup：一方、これはあなたが発射したいイベントです。

     //script
     var allclickthrough=[];         
     function hidedivover(){
              if(allclickthrough.length==0){
                allclickthrough=getElementsByClassName(document.body,"clickthrough");// if so .parentNode
                }
              for(var i=0;i<allclickthrough.length;i++){
                 allclickthrough[i].style.left=parseInt(allclickthrough[i].style.left)+2000+"px";
                 }
              setTimeout(function(){showdivover()},1000);   
              }
    function showdivover(){
             for(var i=0;i<allclickthrough.length;i++){
                allclickthrough[i].style.left=parseInt(allclickthrough[i].style.left)-2000+"px";
                }
             }       
    //html
    <span onmouseup="Dreck_he_got_me()">Click me if you can.</span>
    <div  onmousedown="hidedivover()" style="position:absolute" class="clickthrough">You'll don't get through!</div>
0
B.F.