1857

と一緒にを持ってdivいます。この の下に、さらに要素があります。background:transparentborderdiv

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

divこれをクリックして、下にある要素をクリックできるようにしたいと考えています。

私の問題

4

17 に答える 17

2991

はい、できます。

pointer-events: noneIE11 用の 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;

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

于 2011-01-29T21:49:17.727 に答える
436

はい、重なっているレイヤーに強制的にクリック イベントを通過させる (無視する) ことができます。さらに、特定の子供をこの動作から
除外することもできます...

これを行うには、pointer-events

pointer-eventsクリック、タップ、スクロール、およびホバー イベントへの反応に影響を与えます。

設定した言及されたイベントを無視/パススルーする必要があるレイヤーで

pointer-events: none;

マウス/タップ イベントに再び反応する必要がある応答しないレイヤーの子には、次のものが必要です。

pointer-events: auto;

その 2 番目の部分は、複数の重複する div レイヤー (おそらくいくつかの親が透明である) で作業する場合に非常に役立ちます。そこでは、子要素をクリックし、その子要素のみをクリックできるようにする必要があります。

使用例:

.parent {
  pointer-events:none;        
}
.child {
  pointer-events:auto;
}
<div class="parent">
  <a href="#">I'm unresponsive</a>
  <a href="#" class="child">I'm clickable again, wohoo !</a>
</div>

于 2014-11-07T11:06:36.277 に答える
47

ユーザーがdiv基本要素までクリックできるかどうかは、ブラウザによって異なります。Firefox、Chrome、Safari、Opera など、最新のブラウザはすべてpointer-events:none.

IE の場合は、背景に依存します。背景が透明な場合、クリックスルーは何もしなくても機能します。一方、 のようなものではbackground:white; opacity:0; filter:Alpha(opacity=0);、IE は手動でイベントを転送する必要があります。

JSFiddle テストとCanIUse ポインタ イベントを参照してください。

于 2012-10-16T17:26:18.107 に答える
21

ここに完全には表示されなかったので、この回答を追加します。elementFromPoint を使用してこれを行うことができました。だから基本的に：

  • クリックしてもらいたいdivにクリックを付けます
  • 隠す
  • ポインタがどの要素上にあるかを判断する
  • そこの要素をクリックします。
var range-selector= $("")
    .css("position", "absolute").addClass("range-selector")
    .appendTo("")
    .click(function(e) {
        _range-selector.hide();

        $(document.elementFromPoint(e.clientX,e.clientY)).trigger("click");
    });

私の場合、オーバーレイ div は完全に配置されています。これが違いを生むかどうかはわかりません。これは少なくとも IE8/9、Safari Chrome、Firefox で動作します。

于 2012-05-16T17:25:05.273 に答える
17
  1. 要素のオーバーレイを非表示
  2. カーソル座標を決定する
  3. それらの座標の要素を取得します
  4. 要素のトリガー クリック
  5. オーバーレイ要素を再度表示
$('#elementontop').click(e => {
    $('#elementontop').hide();
    $(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
    $('#elementontop').show();
});
于 2013-02-20T20:04:55.283 に答える
12

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

$('.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');
});
于 2012-07-11T19:29:49.883 に答える
6

現在、キャンバスの吹き出しを使用しています。ただし、ポインタのあるバルーンは 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 の左/上および右/下のコーナーの座標を取得します。さらに、誰かがその座標をクリックした場合にどうするかを示す name 属性を取得します。私は、クリックされなかったことを意味する 1 を設定するのが好きでした。 . そして、この配列をクリック配列にシフト解除します。プッシュも使用できます。

その配列を操作するには:

$("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でした...

于 2012-01-09T13:36:01.720 に答える
5

（状況に応じて）試す別のアイデアは次のとおりです。

  1. 必要なコンテンツを div に入れます。
  2. z-index を高くしてページ全体に非クリック オーバーレイを配置し、
  3. 元のdivの別のトリミングされたコピーを作成します
  4. overlay と abs は、さらに高い z-index でクリック可能にしたい元のコンテンツと同じ場所にコピー div を配置しますか?

何かご意見は？

于 2013-02-26T22:32:42.013 に答える
3

aたとえば、すべての HTML 抽出物をタグで囲むだけです。

<a href="/categories/1">
  <img alt="test1" class="img-responsive" src="/assets/photo.jpg" />
  <div class="caption bg-orange">
    <h2>
      test1
    </h2>
  </div>
</a>

私の例では、キャプション クラスにホバー効果があります。あなたはただ失うでしょう

コンテンツをラップすると、ホバー効果が保持され、div を含むすべての画像をクリックできます。

于 2014-02-16T21:28:30.767 に答える
3

いいえ、要素をクリックして「スルー」することはできません。クリックの座標を取得して、クリックされた要素の下にある要素を見つけようとすることはできますが、document.elementFromPoint. 次に、クリックのデフォルト アクションをエミュレートする必要があります。これは、その下にある要素によっては必ずしも簡単ではありません。

完全に透明なウィンドウ領域があるので、それを外側の別の境界要素として実装し、中央領域を障害物から解放して、本当にまっすぐクリックできるようにしたほうがよいでしょう。

于 2010-09-09T21:27:16.160 に答える
2

マークアップの変更を検討できると思います。私が間違っていなければ、ドキュメントの上に不可視のレイヤーを配置したいと考えており、不可視のマークアップがドキュメントの画像の前にある可能性があります (これは正しいですか?)。

代わりに、ドキュメント画像の直後に非表示を配置し、位置を絶対に変更することを提案します。

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

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

お役に立てれば。CSS ポジショニングの詳細については、こちらを参照してください。

于 2011-07-28T21:00:05.087 に答える
2

event.stopPropagation();ここでも言及されるべきだと思います。これをボタンの Click 関数に追加します。

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

于 2018-06-14T12:10:27.273 に答える
1

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

要素が占める領域は、1. ページの左上を基準とした要素の位置を取得し、2. 幅と高さによって見つけることができます。jQuery のようなライブラリを使用すると、単純な js でも実行できますが、これは非常に簡単になります。mousemoveオブジェクトにのイベント ハンドラーを追加するdocumentと、ページの上部と左側からのマウス位置が継続的に更新されます。マウスが特定のオブジェクトの上にあるかどうかを判断するには、マウスの位置が要素の左端、右端、上端、下端の間にあるかどうかを確認します。

于 2010-09-09T20:45:19.487 に答える
1

オーバーレイとその下にある要素の両方をクリック可能/選択可能にしたかったので、私のシナリオでは常に使用できるとは限りませんでした。pointer-events: none

DOM 構造は次のようになります。

<div id="outerElement">
   <div id="canvas-wrapper">
      <canvas id="overlay"></canvas>
   </div>
   <!-- Omitted: element(s) behind canvas that should still be selectable -->
</div>

( outerElement、canvas-wrapperおよびcanvas要素は同じサイズです。)

キャンバスの背後にある要素を通常どおり (選択可能、編集可能など) 動作させるために、次のコードを使用しました。

canvasWrapper.style.pointerEvents = 'none';

outerElement.addEventListener('mousedown', event => {
    const clickedOnElementInCanvas = yourCheck // TODO: check if the event *would* click a canvas element.
    if (!clickedOnElementInCanvas) {

        // if necessary, add logic to deselect your canvas elements ...

        wrapper.style.pointerEvents = 'none';
        return true;
    }

    // Check if we emitted the event ourselves (avoid endless loop)
    if (event.isTrusted) {
        // Manually forward element to the canvas
        const mouseEvent = new MouseEvent(event.type, event);
        canvas.dispatchEvent(mouseEvent);
        mouseEvent.stopPropagation();
    }
    return true;
});

一部のキャンバス オブジェクトには入力フィールドも含まれていたため、キーボード イベントも許可する必要がありました。これを行うにはpointerEvents、キャンバスの入力フィールドが現在フォーカスされているかどうかに基づいてプロパティを更新する必要がありました。

onCanvasModified(canvas, () => {
    const inputFieldInCanvasActive = // TODO: Check if an input field of the canvas is active.
    wrapper.style.pointerEvents = inputFieldInCanvasActive  ? 'auto' : 'none';
});
于 2021-01-13T18:39:29.290 に答える
1

次のような AP オーバーレイを配置できます...

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

<div id="overlay"></div>

クリックしたくない場所に置くだけです。すべてで動作します。

于 2012-10-29T17:09:05.913 に答える