回答:
はい、あなたはCAN、これを行います。
使い方pointer-events: none（IE10以下では動作しません）IE11のためのCSS条件文と一緒に、あなたがこの問題のために、クロスブラウザの互換性ソリューションを得ることができます。
を使用すると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;以下は、すべてのコードを含む基本的なサンプルページです。
また
、親要素（おそらく透明なdiv）のポインターイベントを無効にすることもできますが、その子要素に対しては引き続き有効にすることができます。
これは、親レイヤーがマウスイベントにまったく反応しないようにしながら、子要素をクリックできるようにする複数の重複するdivレイヤーで作業する場合に役立ちます。
このため、すべてのpointer-events: none子のdivが取得され、そのクリック可能な子が次のように再度有効になるポインターイベントを取得します。pointer-events: auto
.parent {
pointer-events:none;
}
.child {
pointer-events:auto;
}
<div class="some-container">
<ul class="layer-0 parent">
<li class="click-me child"></li>
<li class="click-me child"></li>
</ul>
<ul class="layer-1 parent">
<li class="click-me-also child"></li>
<li class="click-me-also child"></li>
</ul>
</div>ユーザーがaをクリックdivして基本要素にアクセスできるかどうかは、ブラウザによって異なります。Firefox、Chrome、Safari、Operaなどの最新のブラウザはすべてを理解していpointer-events:noneます。
IEの場合、背景に依存します。背景が透明の場合、何もしなくてもクリックスルーは機能します。一方、などのbackground:white; opacity:0; filter:Alpha(opacity=0);場合、IEは手動のイベント転送を必要とします。
JSFiddleテストとCanIUseポインターイベントを参照してください。
ここでは完全に表示されなかったので、この回答を追加します。elementFromPointを使用してこれを行うことができました。だから基本的に：
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で少なくとも動作します。
$('#elementontop').click(e => {
$('#elementontop').hide();
$(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
$('#elementontop').show();
});$('#elementontop)必要があり$('#elementontop')ますか？
私はこれを行う必要があり、このルートを取ることを決めました：
$('.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を設定するのが好きでした。 。そして、この配列をclickarrayにシフト解除します。プッシュも使用できます。
その配列を操作するには：
$("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属性を返します。深く掘り下げる必要はないと思いますが、それほど複雑ではありません。希望は英語でした...
そのようには機能しません。回避策は、各要素が占める領域に対してマウスクリックの座標を手動でチェックすることです。
要素が占める領域は、1。ページの左上を基準とした要素の位置を取得し、2。幅と高さを見つけることで見つけることができます。jQueryのようなライブラリはこれをかなり単純にしますが、プレーンなjsで行うこともできます。イベントハンドラを追加することmousemoveでdocument、オブジェクトは、ページの最上部と左からマウス位置の継続的な更新を提供します。マウスが特定のオブジェクト上にあるかどうかを判断するには、マウスの位置が要素の左端、右端、上端、下端の間にあるかどうかを確認します。
マークアップの変更を検討できると思います。私が間違っていない場合は、ドキュメントの上に非表示レイヤーを配置し、非表示マークアップがドキュメントイメージの前にある可能性があります（これは正しいですか？）。
代わりに、ドキュメントイメージの直後に非表示を配置し、位置を絶対に変更することをお勧めします。
position：relativeを持つには親要素が必要であり、このアイデアを使用できるようになることに注意してください。それ以外の場合、絶対レイヤーは左上隅に配置されます。
絶対位置要素は、静的以外の位置を持つ最初の親要素に対して相対的に配置されます。そのような要素が見つからない場合、包含ブロックはhtmlです。
お役に立てれば。CSSの配置について詳しくは、こちらをご覧ください。
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を含むすべての画像をクリックできます。
より簡単な方法は、次のようにデータURIを使用して透明な背景画像をインライン化することです。
.click-through {
pointer-events: none;
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}これは質問に対する正確な回答ではありませんが、回避策を見つけるのに役立つ場合があります。
ページの読み込み時に非表示にしていて、AJAX呼び出しを待機しているときに表示していた画像を再度非表示にしました...
ページを読み込むときに画像を表示し、それを非表示にして、画像を非表示にする前にクリックできるようにする唯一の方法を見つけました。DIVに画像を配置し、DIVのサイズを10x10ピクセル以下にしました。それが問題を引き起こしてから、それを含むdivを隠すのを防ぐのに十分です。これにより、表示中に画像がdivをオーバーフローし、divが非表示の場合、div領域のみが影響を受け、DIVに含まれ表示されていた画像のサイズ全体ではなく、下のオブジェクトをクリックできなくなりました。
CSS display = none / block、opacity = 0を含むすべての方法で画像を非表示にし、hidden = trueで画像を非表示にしました。それらすべてが私の画像を非表示にしましたが、画像の下にあるものの上にカバーがあったように機能するように表示されていた領域は、クリックなどが下にあるオブジェクトに機能しませんでした。画像が小さなDIVの中にあり、小さなDIVを非表示にすると、画像が占める領域全体がクリアになり、非表示にしたDIVの下の小さな領域のみが影響を受けましたが、十分に小さくしたため（10x10ピクセル）、問題修正されました（一種）。
これは単純な問題であるはずの汚い回避策であることがわかりましたが、コンテナーなしでネイティブ形式でオブジェクトを非表示にする方法を見つけることができませんでした。私のオブジェクトは等の形でした。誰かがより良い方法を持っているなら、私に知らせてください。