177

(任意のグラフィックスを描画するために) Web ページの上に要素を重ねようとしていますが、すべての上にある要素の内側にそれを積み重ねることができるようになりましたが、これによりユーザーがクリックできなくなりますリンク/ボタン/など。そのコンテンツをすべての上に浮かせて (半透明なので、背後にあるものをまだ見ることができます)、ユーザーにその下のレイヤーを操作させる方法はありますか?

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

4

9 に答える 9

132

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

.overlay {
    height:0px;
    overflow:visible;
    pointer-events:none;
    background:none !important;
}
于 2014-11-14T14:02:08.993 に答える
63

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

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

[更新] まさにこの問題とまさに私の解決策がこの投稿に登場しました:「レイヤーを介したマウスイベントの転送」。OPにはおそらく少し遅れていることはわかっていますが、将来この問題を抱えている人のために、私はそれを含めます.

于 2009-09-09T19:59:21.877 に答える
6

記録として、別の方法として、クリック可能なレイヤーをオーバーレイにすることも考えられます。レイヤーを半透明にしてから、その背後に「オーバーレイ」画像を配置します (やや直感に反して、「オーバーレイ」画像は不透明になる可能性があります)。何をしようとしているのかにもよりますが、クリック可能性の問題を回避しながら、まったく同じ視覚効果 (画像とクリック可能なレイヤーが半透明に重ね合わされたもの) を得ることができるかもしれません (「オーバーレイ" は実際にはバックグラウンドにあります)。

于 2009-11-09T18:12:09.813 に答える
5

他の誰かが同じ問題に遭遇した場合、満足できる唯一の解決策は、キャンバスがすべてをカバーしてから、すべてのクリック可能な要素の Z インデックスを上げることでした。それらに描画することはできませんが、少なくともクリック可能です...

于 2009-09-12T10:11:38.180 に答える
4

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

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

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

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

これのいいところは、

  • すべてのイベントをすべての要素に渡すわけではありません。欲しいものだけ。（@jvenemaの議論を解決）
  • すべてのイベントが正常に機能します。(例: ホバー)。

問題がある場合は、詳しく説明しますのでお知らせください。

于 2014-01-14T12:40:56.470 に答える
3

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

于 2009-09-09T19:44:55.673 に答える
2

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

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

<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>
于 2009-09-09T19:59:08.567 に答える
0

IEの場合はどうですか？：

onmousedown：イベントをオーバーレイする可能性のあるすべての要素を非表示にします。display：none visuality：hidden not realyが機能するため、オーバーレイする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>
于 2013-01-28T11:43:36.750 に答える