jquery絶対配置要素クリック

Question

絶対配置されたdivのクリックに問題があります。 jqueryのスクロールパスを使ってWebサイトを開発しています。余分なレイヤーを追加して視差効果を得て、トップレイヤーはメインレイヤーのボタンをカバーしています。

Hereは簡単examlpleです：

<div class="body"> 
<div class="a"></div> 
<div class="b"> 
    <div class="element first">First</div> 
    <div class="element second">Second</div> 
</div> 
</div> 

.body { 
    position relative; 
} 
.a { 
    position: absolute; 
    left: 20px; 
    top: 20px; 
    width: 300px; 
    height: 600px; 
    background: rgba(0,0,0,0.5); 
    z-index: 2; 
} 
.b { 
    position: absolute; 
    left: 40px; 
    top: 40px; 
    width: 260px; 
    height: 300px; 
    background: blue; 
    z-index: 1; 
} 
.b .element { 
    position: absolute; 
    width: 50px; 
    height: 50px; 
    background: red; 
} 
.b .element.first { 
    top: 50px; 
    left: 50px; 
} 
.b .element.second { 
    bottom: 50px; 
    right: 50px; 
} 
} 

私は、このHTML構造と低Zインデックスと絶対位置のdivでのdivのをクリックする能力を維持する必要があります。出来ますか？

Answer 1

上部の要素でpointer-events〜を設定すると、マウスイベントで反応するのを止めることができます。あなたが追跡する必要がいけない場合https://developer.mozilla.org/en/docs/Web/CSS/pointer-events?v=example

Answer 2

：

pointer-events:none; 

JSFIDDLE http://jsfiddle.net/ugGgN/5/

クロスブラウザのサポートは、これらの日は非常に良いです：ポインタのイベントの詳細についてはhttp://caniuse.com/#feat=pointer-events

のドキュメントを参照してください。上のレイヤーでイベントをクリックすると、これを実現できます

上層の

ワーキングフィドル：http://jsfiddle.net/joycse06/ugGgN/6/

それとも、またpointer-events: noneが適切にクロスブラウザはサポートされていないとして、それが層を貫通してクリックイベントを転送することによって動作させることができます。このリンクを見てくださいhttp://www.vinylfox.com/forwarding-mouse-events-through-layers/

Answer 3

"pointer-events：none;"を追加できます。絶対配置された要素の包含divに渡します。そうすれば、要素をトラフすることができます。

Answer 4

cssの方法は良いですが、彼らが言ったようにcorssのブラウザはありません。とにかく、答えhere、stackoverflowで見つけることができます。あなたには2つの方法があります。もし私があなただったらjs methodを使います。

：あなたは私がjsの例に従っていて、私にはthisがあります。

$('.a').on('click', function(event){ 
    var clickPos = [event.pageX, event.pageY]; 
    $('.element').each(function(){ 
     var t = $(this), 
      elemPos = [t.offset().left, t.offset().top], 
      elemSize = [t.width(), t.height()]; 

     if (
      clickPos[0] > elemPos[0] && clickPos[0] < elemPos[0] + elemSize[0] 
      && clickPos[1] > elemPos[1] && clickPos[1] < elemPos[1] + elemSize[1] 
     ) t.trigger('click'); 
    }); 
}); 

Answer 5

これを解決するクロスブラウザの方法は、z-indexを使用して、それを親の上のレイヤーに配置することです。