別の要素の下にある要素のクリックを登録する|Codeflow

私は不透明度が0.5の要素の下にある要素をクリックして欲しいと思います。一番上の要素をクリックスルーするにはどうすればよいですか。

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

あなたがボックスをホバーに切り替えさせることができるならばボーナスポイント。

サンドボックス本体{背景色：＃000; }
.box {width: 50px; height: 50px; border: 1px solid white}
.highlight {background-color: yellow;}

var dthen = new Date（）; $（ '<div id = "past">'）。css（{'height'：（dthen.getMinutes（）* 60））dthen.getSeconds（） 'px'、 'position'： 'absolute'、 'width' ： '200px'、 'top'： '0px'、 '背景色'： 'グレー'、 '不透明度'： '0.5'}）.appendTo（ "＃container"）;

setInterval（function（）{dNow = new Date（）; $（ '＃past'）。css（ 'height'、（（dNow.getSeconds（）（dNow.getMilliseconds（）/ 1000））* 50）％300 ' px '）;}、10）

$（ "。box"）。クリック（function（）{$（this）.toggleClass（ "highlight"）;}）;

javascript jquery

Source

4 Answer

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

イベントを手動で発生させるには、これを実行できます。

$（ "＃topelement"）。クリック（function（）{$（ "＃elementbelow"）。click（）; falseを返す;}）;

EDIT（コメントに対する回答）：

すべてのボックスを列挙するために、あなたはこれをすることができます（私の頭の上から）。テストしない、構文エラーのないものにすることはできません）

$（ "＃topelement"）。click（function（e）{$（ "。box"）。each（function（）{//クリックされた点が（イベントから取得される）要素内にあるかどうかを調べますvar mouseY = e.pageY; var offset = $（this）.offset; var width = $（this）.width（）; var height = $（this）.height（）;

if（mouseX> offset.left）

Source

そうですね、私は2つ考えています。（1）まだ広く採用されていないCSS3の回答、および（2）それ以外のJavascriptのバックアップ計画です。（CSS部分をサポートしていない古いブラウザでJSのないユーザについてどうするべきかわからない）。読む…

まず、このCSS3コードを使用して、上部要素をマウスの操作に「見えない」ようにします。

pointer-events: none;

これはまだクロスブラウザ互換ではありません。 SVGでしか動作しません

MDNあたり：

_ CSSプロパティのpointer-eventsを使用すると、要素をマウスイベントのターゲットにするかどうか、またはいつ作成するかを制御できます。このプロパティは、マウスイベントがどのような状況下にある場合に要素を「通過」し、代わりにその要素の「下にある」ものをターゲットにするかを指定するために使用されます。 _

そのドキュメントは次のとおりです。https://developer.mozilla.org/en/css/pointer-events

2番目：まだこのCSSをサポートしていないブラウザには、JavaScript機能検出を使用してください。 Modernizrと同様に、自分でロールバックする必要があります。これはまだテストされていないためです（私の知る限り）。アイデアは、要素を作成し、それにCSSでpointer-eventsを適用し、それをチェックすることです。ブラウザがその機能をサポートしていれば、nullや未定義のものとは対照的に期待通りの結果が得られます。それから要素を破壊する。いずれにしても、一度機能が検出されたら、jQueryなどを使用してリスナーを最上位の要素にアタッチし、そこからクリックして他の要素にクリックスルーすることができます。 jQueryをチェックしてください。詳細についてはclick（）関数を使用してください（リンクを投稿するのに十分な評判ではありません）。

後で時間がかかる場合は、簡単なjsFiddleを作成することができます。これが役に立つことを願っています。

Source

上記のコードをjquery関数に変更しました。誰かが便利だと思うかもしれません。

クリックされた他の要素を探す：

$（ '。child'）。（function（e）{$（this）.siblingsUnderMouse（e）.each（fn）;}）;をクリックします。

画像の透明ピクセルを無視したい場合は、

$（ '。child'）。クリック（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）; //クリックされた点（eventから取得）が要素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）

arr.push（t）; ;））; arrを返します。 }

$ .fn.isOnVisiblePixel = function（e）{（e.type == 'mouseleave'）がfalseを返す場合

var t = this [0]; if（！t || t.tagName！= 'IMG'）t = this.find（ 'img'）[0]; if（！t）の場合

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（）; （x <0 || y <0 || x> = w || y> = h）の場合はfalseを返します。

var c = $（ ''）[0]; c.width = w;身長= 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） }

Source

私はLelandoが正しい打撃を受けると思います。私の場合、私はCSSのみを使用して解決し、あなたは* pointer-events：none をあなたの＃past *要素に挿入することができます。

Source