0

説明

divこのテーブルの各 TD にはイベントがありますonClick。

ただし、このテーブルの前にいくつかのテキストを表示する必要がある場合もありますが、このテキストはテーブルの TD を台無しにすることはできません。

だから私の問題は、テーブルの前にテキストを表示する必要があることですが、このテキストをクリックしても何も影響せず、テキストの後ろにある正しいクリックされた TD がそのイベントを呼び出す必要があります。

私がやった事：

あり、#div1あり、後ろあり、前あり（どちらもあり）。 ありますが、表示されないだけです。#div2#div1#div2position:absolute
#div1#div2

のみが表示されていますが、 の前#div2からテキストを表示する必要があります。これを作るために、私はonを付けて、スパンの を設定します。このように、まだ表示されていませんが、表示されています。#div1#div2span#div1z-index:1#div1span

すべて問題ありませんが、新しい問題が発生しました。

#div2(前面)をクリックして、div 全体でイベントを取得する必要があります。

から#div1のメールがあっても、商売じゃなくて見せるだけ。

読んだだけではわかりにくいので、このFiddleを作りました。

赤い "Text1 from #div1..." をクリックしてください。TD html コンテンツに警告する必要があります。

4

3 に答える 3

1

この回避策を試すことができます：http：//jsfiddle.net/W9jy5/5/

JavaScript

$(document).ready(function(){
    $("#div2").click(function(){
        clickedOnDiv2();
    });
    $('#span1').click(function (e) {
        var div2 = $('#div2'),
            offset = div2.offset();
        if (e.pageX > offset.left && e.pageX < offset.left + div2.width() &&
            e.pageY > offset.top && e.pageY < offset.top + div2.height()) {
                clickedOnDiv2();
            }
    });

    function clickedOnDiv2() {
        alert('#div2');
    }
})​

この回避策では、span要素にクリックイベントリスナーがあります。ユーザーがText1をクリックし、クリックが＃div2を超えた場合、を実行しclickOnDiv2ます。

そしてここでそれはあなたのコメントhttp://jsfiddle.net/W9jy5/17/の質問に答えます。クロスブラウザです。

于 2012-11-24T22:07:01.720 に答える
0

#div1 span1CSSを使用して「フォールスルー」をクリックすることができます。

#div1 span{
  pointer-events: none;
}

FFおよびWebkitブラウザーで動作するはずですが、IE8以下では運が悪いです。

実例： http： //jsfiddle.net/W9jy5/12/

于 2012-11-24T22:34:29.797 に答える
0

#div1とは DOM 兄弟であるため、in#div2のイベントを「キャプチャ」することはできません。はの子孫ですが、 にアタッチしたのと同じハンドラーが必要なため、複数の要素にリスナーをアタッチするか、DOM を再配置する必要があります。#div1#div2SPAN#div1#div2

これを解決する 1 つの方法は、クリックを代わりに親 div に委任することです。

$("#container").on('click', '#div2, #div1 span', function(){
    alert("#div2");
})

デモ: http://jsfiddle.net/Pwkqq/

于 2012-11-24T21:56:40.520 に答える