他の要素の下にある要素のクリックを登録します。

私は、不透明度の要素の下にある要素を持っています：0.5をクリックできます。一番上の要素を「スルー」するにはどうすればいいですか？他の要素の下にある要素のクリックを登録します。

ここに私の問題を示す例があります。ボックスをクリックしてオン/オフを切り替えます。あなたはそれを編集してあなたの解決策を試すことができます。on jsbin

ホバー上でボックスを切り替えることができる場合は、ボーナスポイントが必要です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<title>Sandbox</title> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<style type="text/css" media="screen"> 
body { background-color: #000; } 
.box {width: 50px; height: 50px; border: 1px solid white} 
.highlight {background-color: yellow;} 
</style> 
<script type="text/javascript"> 
var dthen = new Date(); 
$('<div id="past">').css({'height': (dthen.getMinutes()*60)+dthen.getSeconds() +'px' 
      ,'position': 'absolute' 
      ,'width': '200px' 
      ,'top': '0px' 
      ,'background-color': 'grey' 
      ,'opacity': '0.5' 
      }) 
     .appendTo("#container"); 

setInterval(function(){ 
    dNow = new Date(); 
    $('#past').css('height', ((dNow.getSeconds()+(dNow.getMilliseconds()/1000))*50)%300 +'px'); 
},10) 

$(".box").click(function(){ 
     $(this).toggleClass("highlight"); 
    }); 
</script> 
</head> 
<body> 
    <div id="container"> 
    <div class="box" style="position:absolute; top: 25px; left: 25px;"></div> 
    <div class="box" style="position:absolute; top: 50px; left: 125px;"></div> 
    <div class="box" style="position:absolute; top: 100px; left: 25px;"></div> 
    <div class="box" style="position:absolute; top: 125px; left: 125px;"></div> 
    <div class="box" style="position:absolute; top: 225px; left: 25px;"></div> 
    <div class="box" style="position:absolute; top: 185px; left: 125px;"></div> 
    </div> 
</body> 
</html>

出典

2009-07-18 Sam Hasler

私はここであなたのための完全な解決策を書くとは思わない。以下の提案を使用して、ソリューションを自分で実装する必要があります。 SOは無料のコンサルタントショップではありません。 –

私はこれをやりたいと思う唯一の人だとは思えません。だから私はそれを行う方法を示すコードは私がそれを計画しているものを超えて使用を見つけるだろうと思う。私はこれを行うためのコードを要求することに何の問題も見ません。 –

samまた、.cssを使用するすべての設定ではなく、addClassを使用してください – redsquare

OK構文エラーがないこと、しないことができませんでしたので、私は私がすると思う2つのことがあります：（1）CSS3の答えは、それはないですがまだ広く採用されている、そして（2）残りのためのJavascriptのバックアップ計画。（CSS部分をサポートしていない古いブラウザでは、JSを使用しないユーザーについて何をすべきかわからない）。 ...

ファーストをお読み：マウス - 相互作用に「目に見えない」上位要素を作るために、このCSS3のコードを使用します。

pointer-events: none;

これはまだクロスブラウザの互換性はありません。これは、Gecko &のSVG & HTML要素でのみ動作しますが、OperaのSVG要素でのみ動作し、IEではまったく動作しません。 MDN当たり

：

CSSプロパティポインタイベントは著者は要素がマウスイベントの対象とすることができるかどうか時期を制御することを可能にします。このプロパティはに使用されます（の場合）。マウスイベントは、の要素を通過し、その要素の下にのいずれかをターゲットにする必要があります。

ここではそのドキュメントです：https://developer.mozilla.org/en/css/pointer-events

第二：まだこのCSSをサポートしていないこれらのブラウザのためにいくつかのJavaScript機能の検出を使用してくださいが。 Modernizrのように自分自身をロールバックする必要があります。なぜなら、私の知る限り、これはまだテストされていないからです。アイデアは、要素を作成し、ポインタイベントCSSを適用してチェックし、ブラウザがその機能をサポートしている場合、nullまたは未定義とは対照的に、期待される結果を得ることです。要素を破壊する。とにかく、機能の検出ができたら、jQueryなどを使用して最上位の要素にリスナーをアタッチし、そこからクリックを割り当ててクリックします。 jQueryをチェックし、click（）関数を使用して詳細情報を表示します（リンクを投稿するには評判が足りません）。

後で時間がかかる場合は、jsFiddleを使って作業することができます。私はこれが役立つことを願っています

出典

2011-04-29 19:29:25 Lelando

これは動作します！ [point-events]（http://jsbin.com/limesat/edit?html,css,js,output）ソリューションと[オリジナルソリューション]（http://jsbin.com/pefop/edit?html、 css、js、出力）。もちろん、私が2009年にこれを最初に尋ねたとき、ポインタイベントは存在しませんでした。[IE11はポインタイベントをサポートする最初のバージョンでした]（http://caniuse.com/#search=pointer-events） 2013年 –

IE10以下をサポートする必要がある場合、ModernizrはCSSポインタイベントのテストを表示します –

これはまた、ホバーの問題を解決します。 '.box：hover'にスタイルをつけるだけで、#past要素の下ではまだトリガされます。 –

ます最上位の要素は以下の要素内に含まれている場合、あなたは「を通じてバブル」イベントをさせることができます。そうでない場合は、手動でクリックをトリガーする必要があります。クリックするだけでイベントハンドラを起動する方法はありません。

$("#topelement").click(function() { 
    $("#elementbelow").click(); 
    return false; 
});

EDIT（コメントへの応答）：手動でイベントを発生させる

、あなたがこれを行うことができるすべてのボックスを列挙するに

を、あなたはこれを行うことができます（私のトップオフ。頭なしテストは、偶数）

$("#topelement").click(function(e) { 
    $(".box").each(function() { 
     // check if clicked point (taken from event) is inside element 
     var mouseX = e.pageX; 
     var mouseY = e.pageY; 
     var offset = $(this).offset; 
     var width = $(this).width(); 
     var height = $(this).height(); 

     if (mouseX > offset.left && mouseX < offset.left+width 
      && mouseY > offset.top && mouseY < offset.top+height) 
     $(this).click(); // force click event 
    }); 
});

出典

2009-07-18 19:59:19

クリックしたポイントが1つまたは複数の要素の内部にあるかどうかを確認するには、すべてのDOM要素を列挙する必要があります。ブラウザがあなたのためにこれを行う方法はありません –

ありがとうございました：http://jsbin.com/pefop/edit –

私は誰かがそれが役に立つかもしれません、jqueryの関数に上記のコードを変更した：

$('.child').click(function(e) { 
    $(this).siblingsUnderMouse(e).each(fn); 
});

あなたが画像で透明なピクセルを無視する場合：クリック-上の要素

検索代替

$('.child').click(function(e) { 
    $(this).siblingsUnderMouse(e).each(function() { 
     var clickOnVisiblePixel = $(this).isOnVisiblePixel(e); 
    }); 
});

コード：

$.fn.reverse = [].reverse; 
$.fn.siblingsUnderMouse = function(e, filter) 
{ 
    filter = filter || '*'; 

    var arr = $(); 
    this.parent().children().filter(filter).reverse().each(function() 
    { 
     var t = $(this); 
     // check if clicked point (taken from event) is inside element 
     var x = (e.pageX - t.offset().left).toFixed(); 
     var y = (e.pageY - t.offset().top).toFixed(); 
     var w = t.width(); 
     var h = t.height(); 

     if (x < 0 || x >= w || y < 0 || y >= h) 
      return; 

     arr.push(t); 
    }); 
    return arr; 
} 

$.fn.isOnVisiblePixel = function(e) 
{ 
    if (e.type == 'mouseleave') return false; 

    var t = this[0]; 
    if (!t || t.tagName != 'IMG') 
     t = this.find('img')[0]; 
    if (!t) return; 

    var w = $(t).width(); 
    var h = $(t).height(); 
    var o = $(t).offset(); 
    var x = (e.pageX - o.left).toFixed(); 
    var y = (e.pageY - o.top).toFixed(); 
    if (x < 0 || y < 0 || x >= w || y >= h) 
     return false; 

    var c = $('<canvas>')[0]; 
    c.width = w; 
    c.height = h; 

    var ctx = c.getContext('2d'); 
    ctx.drawImage(t, 0, 0, w, h); 

    var a = ctx.getImageData(x, y, 1, 1).data[3]; 
    return (a > 128); 
}

出典

2012-11-16 23:46:28

私はLelandoが正しいヒットを得ると思います。私の場合、私はCSSだけを使って解決しました。ポインタイベント：なしを#past要素に挿入することができます。

出典

2017-08-30 16:19:09 Martino

他の要素の下にある要素のクリックを登録します。

答えて

関連する問題