css - 重なり - z-index 下の要素 クリック




下の要素にDIVをクリック (10)

  1. 要素のオーバーレイを隠す
  2. カーソル座標を決定する
  3. それらの座標上の要素を取得する
  4. 要素をトリガーする
  5. オーバーレイしている要素を再び表示する
    $('#elementontop).click(function (e) {
        $('#elementontop).hide();
        $(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
        $('#elementontop').show();
    });

私はbackground:transparentを持っているdivを持っていbackground:transparent borderに沿ってbackground:transparentです。 このdiv下に、私はより多くの要素を持っています。

現在、オーバーレイdiv外側をクリックすると、下にある要素をクリックできます。 ただし、オーバーレイのdivを直接クリックすると、下にある要素をクリックできません。

このdivをクリックすると、基本要素をクリックすることができます。


DIVをクリックすると、ブラウザで異なる基本要素が動作します。 Operaは手動のイベント転送を必要とし、FirefoxとChromeはCSSのpointer-events:none;理解してpointer-events:none; IEは透明な背景を持つものは一切必要ありません。 例えば、 background:white; opacity:0; filter:Alpha(opacity=0); background:white; opacity:0; filter:Alpha(opacity=0); IEはOperaのように転送する必要があります。

およびでフォワーディングテストを参照して 。 Pointer-events CSSプロパティがCSS3-UIからCSS4-UIに移動されました。


あなたはAPオーバーレイのように配置することができます...

#overlay {
  position: absolute;
  top: -79px;
  left: -60px;
  height: 80px;
  width: 380px;
  z-index: 2;
  background: url(fake.gif);
}
<div id="overlay"></div>

ちょうどあなたが欲しがっていないところに置くだけです。 すべてで動作します。


いいえ、要素をクリックすることはできません。 クリックの座標を取得し、クリックされた要素の下にあった要素を調べることができますが、これはdocument.elementFromPointを持たないブラウザにとっては本当に面倒です。 それでも、クリックのデフォルト動作をエミュレートする必要があります。これは、下にある要素によっては、必ずしも簡単ではありません。

あなたは完全に透過的なウィンドウ領域を持っているので、おそらくまっすぐにクリックすることができますので、中央領域に妨害のないまま、外側の周りに別々の境界要素として実装する方が良いでしょう。


それはそのようには機能しません。 回避策は、マウスクリックの座標を各要素が占める領域に対して手動でチェックすることです。

要素が占める領域は、1.ページの左上を基準にして要素の位置を取得すること、および2.幅および高さによって検出されることがわかる。 jQueryのようなライブラリはこれをかなりシンプルにしますが、普通のjsで行うこともできます。 documentオブジェクトにmousemoveイベントハンドラをmousemoveすると、ページの左上からマウスの位置が連続的に更新されます。 マウスが任意のオブジェクト上にあるかどうかを判断するには、マウスの位置が要素の左端、右端、上端および下端の間にあるかどうかをチェックすることから構成されます。


はい、これを行うことができます。

pointer-events: noneを使用するpointer-events: none IE11のCSS条件文(IE10以下では動作しません)と一緒に使用すると、この問題のクロスブラウザー互換ソリューションが得られます。

AlphaImageLoaderを使用すると、透明な.PNG/.GIFオーバーレイdiv 、クリックが下のエレメントに流れるようにすることもできます。

CSS:

pointer-events: none;
background: url('your_transparent.png');

IE11条件付き:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;

すべてのコードを含む基本的なサンプルページです。


マークアップを変更することを検討できると思います。 私が間違っていない場合は、ドキュメントの上に非表示のレイヤーを置いて、目に見えないマークアップがドキュメントイメージの前にあるかもしれません(これは正しいですか?)。

代わりに、私はあなたが文書画像の後ろに不可視の権利を置くが、位置を絶対に変更することを提案する。

position:relativeを持つ親要素が必要であることに注意してください。そうすれば、このアイディアを使用することができます。 それ以外の場合、絶対レイヤーは左上隅に配置されます。

絶対位置要素は、静的以外の位置を持つ最初の親要素に対して配置されます。 そのような要素が見つからない場合、包含ブロックはhtmlです

お役に立てれば。 CSSの配置の詳細については、 hereを参照してください。


私はevent.stopPropagation();と思うevent.stopPropagation(); ここでも言及すべきである。 これをボタンのクリック機能に追加します。

イベントがDOMツリーをバブリングするのを防ぎ、親ハンドラにイベントが通知されないようにします。


私はこれを行う必要があり、このルートを取ることに決めました:

$('.overlay').click(function(e){
    var left = $(window).scrollLeft();
    var top = $(window).scrollTop();

    //hide the overlay for now so the document can find the underlying elements
    $(this).css('display','none');
    //use the current scroll position to deduct from the click position
    $(document.elementFromPoint(e.pageX-left, e.pageY-top)).click();
    //show the overlay again
    $(this).css('display','block');
});

私は現在、キャンバスの吹き出し風船で作業しています。 しかし、ポインタ付きの風船はdivにラップされているため、その下のリンクのクリックができなくなります。 私はこの場合extjsを使用することはできません。 私のスピーチバルーンチュートリアルの基本的な例 はHTML5が必要です

そこで、配列内のバルーン内部からすべてのリンク座標を収集することにしました。

var clickarray=[];
function getcoo(thatdiv){
         thatdiv.find(".link").each(function(){
                 var offset=$(this).offset();           
                 clickarray.unshift([(offset.left),
                                     (offset.top),
                                     (offset.left+$(this).width()),
                                     (offset.top+$(this).height()),
                                     ($(this).attr('name')),
                                     1]);
                                     });
         }

私はこの(新しい)バルーン上でこの関数を呼び出します。 link.classの左/上と右/下のコーナーの座標を取得します。さらに、誰かがその座標をクリックした場合の処理​​の名前属性で、クリックされなかったことを意味する1を設定するのが大好きです。 。 この配列をclick配列にシフトします。 プッシュを使うこともできます。

その配列で作業するには:

$("body").click(function(event){
          event.preventDefault();//if it is a a-tag
          var x=event.pageX;
          var y=event.pageY;
          var job="";
          for(var i in clickarray){
              if(x>=clickarray[i][0] && x<=clickarray[i][2] && y>=clickarray[i][1] && y<=clickarray[i][3] && clickarray[i][5]==1){
                 job=clickarray[i][4];
                 clickarray[i][5]=0;//set to allready clicked
                 break;
                }
             }
          if(job.length>0){   
             // --do some thing with the job --
            }
          });

この関数は、ボディクリックイベントの座標、または既にクリックされているかどうかを検証し、name属性を返します。 私は深くする必要はないと思うが、複雑ではないことが分かる。 希望はenlishだった...





css