0

jQueryイベントコールバックを正しくトリガーしようとしていますが、ページ上で別の要素がカバーされているため、興味のある要素がイベントを受信しないという事実を回避できないようです。次のように要約できます (要素のスタイルを設定して、jsfiddle に表示されるようにしました)。

<div id='mydiv'>
    <div style="border: 1px solid; border-color: red; position: absolute; left: 0px; top: 0px; width: 200px; height: 200px; z-index: 100">Hello</div>
    <canvas style="border: 1px solid; border-color: yellow; position: absolute; left: 50px; top: 50px; width: 150px; height: 150px"></canvas>
</div>​

上記のセグメントで、 でマウス クリックをリッスンしようとすると<canvas>、イベントが呼び出されません。

$('#mydiv').on('mousedown', 'canvas', this, function(ev) {
    console.log(ev.target);
});

ただし、代わりに要素をリッスンするようにイベント ハンドラーを変更すると、<div>期待どおりにコールバックがトリガーされます。

$('#mydiv').on('mousedown', 'div', this, function(ev) {
    console.log(ev.target);
});

問題のあるブロックを最前線に置いた<canvas>まま、イベントを受信するように強制するにはどうすればよいですか?<div>

4

4 に答える 4

1

要素を最も近い共通の親にバインドし、マウスの X 座標と Y 座標がキャンバスの範囲内にあるかどうかを確認できます。

  • 以下の例では、キャンバスの寸法 (高さと幅) をキャッシュしています。これは、これらが一定であると想定しているためです。次元が一定でない場合は、これを関数内に移動します。

  • メソッドを使用して、左上隅の.offset()実際の X 座標と Y 座標を計算します。と<canvas>の値を加算して、右下隅の座標を計算します。outerWidth().outerHeight()

基本的なデモ: http://jsfiddle.net/75qbX/2/

var $canvas = $('canvas'), /* jQuery reference to the <canvas> */
    $canvasWidth = $canvas.outerWidth(), /* assuming height and width to be constant */
    $canvasHeight = $canvas.outerHeight();
function isCanvasClicked(x, y, target) {
    if (target.tagName === 'CANVAS') return true;
    var offset = $canvas.offset(),
        left = offset.left,
        top = offset.top;

    return x >= left && x <= left + $canvasWidth &&
           y >= top && y <= top + $canvasHeight;              
}
$('#mydiv').on('mousedown', '*', this, function(ev) {
    if (isCanvasClicked(ev.pageX, ev.pageY, ev.target)) {
        $canvas.fadeOut().fadeIn();
    }
});
于 2012-02-26T15:49:59.763 に答える
1

すでに提案されているように、これは最も簡単な解決策です。

http://jsfiddle.net/CUJ68/4/

$('canvas').on('mousedown', function(ev) {
    console.log(ev.target);
});
$('ul').on('mousedown', function(ev){
    $('canvas').mousedown();
});

元のイベントデータが必要な場合:

$('canvas').bind('mousedown', function(ev, parentEV) {
    if(parentEV){
        console.log(parentEV);
        alert("Canvas INdirectly clicked!");
    }else{
        console.log(ev);
        alert("Canvas directly clicked!");
    }
});
$('ul').on('mousedown', function(ev){
    $('canvas').trigger('mousedown', ev);
});
于 2012-02-26T15:52:28.260 に答える
1

できません。上のオブジェクトはクリック イベントを取得します。それがDOMの仕組みです。

そのクリックイベントを処理したい場合は、一番上にあるオブジェクトで処理するか、バブリングを使用して親オブジェクトで処理する必要があります。トップオブジェクトでそれを処理し、必要に応じて他のオブジェクトでクリックをトリガーするか、クリックハンドラーを直接呼び出すことで、他のオブジェクトに「転送」できます。

または、canvas 要素z-indexをより高い値に設定して ul の上に移動すると、クリック イベントが発生します。

または、イベントを取得する新しい透明なキャンバス オブジェクトを作成し、他の 2 つのオブジェクトをそのままにして、目的の視覚効果を得ることができます。

于 2012-02-26T15:35:37.537 に答える
0

ここでは、上の要素でクリックイベントをキャプチャし、他の要素でイベントをトリガーするソリューションがあります。別の要素の下にある要素のクリックを登録する

于 2012-02-26T15:35:26.530 に答える