0

キャンバスをクリックしたときに、キャンバスの現在の ID を取得するにはどうすればよいですか。私の HTML ページには、次の 2 つのキャンバスがあります。

<div>
<canvas id='canvas1' style="width: 740px; height: 420px"></canvas>
</div>
<div>
<canvas id='canvas2' style="width: 740px; height: 420px"></canvas>
</div>

キャンバスの 1 つをクリックしたときに、その ID を取得するにはどうすればよいですか。私はこのように試しました：

$('#canvas1').click(function(){ 
    alert('Clicked on Canvas1');
});

$('#canvas2').click(function(){ 
    alert('Clicked on Canvas2');
});

しかし、キャンバスをクリックしてもアラートは表示されませんでした。前もって感謝します..

4

4 に答える 4

1

domreadyで使用してください

$(function(){
$('#canvas1').click(function(){ 
    alert('Clicked on Canvas1');
});

$('#canvas2').click(function(){ 
    alert('Clicked on Canvas2');
});
});

デモ

于 2013-03-12T13:04:17.700 に答える
1

event.currentTarget.id を使用して、キャンバスの dom ID を取得しました。それがどれほど堅牢かはわかりません。他の人に検討してもらいます。そして、私は確かに JavaScript の初心者です。

問題の各キャンバスにクリック イベント ハンドラーをバインドすることから始めます。次に、イベント オブジェクトに問い合わせて currentTarget.id を取得します。これは、クリックされたキャンバスの dom id です。

$(window).load(function() {
    canvas1 = document.getElementById("canvas1");
    canvas1.addEventListener("mousedown", getPosition, false);
    canvas2 = document.getElementById("canvas1");
    canvas2.addEventListener("mousedown", getPosition, false);
}

function getPosition(event) {
    var x = event.clientX;
    var y = event.clientY;
    var canvas_id = event.currentTarget.id
    var canvas = document.getElementById(canvas_id);
    // you can now execute canvas methods on the canvas clicked on
}
于 2016-10-12T07:51:48.797 に答える
1

ドキュメントの準備ができたら、次のようにクリック バインディングを割り当てる必要があると思います。

$(document).ready(function() {
  $('#canvas1').click(function(){ 
    alert('Clicked on Canvas1');
  });
});

ID を知るための別のオプションは、キャンバスに追加のクラスを与えることです。次に、クリック イベントをクラスにバインドし、次のようにイベント オブジェクトから ID を読み取ります。

$(".canvasclass").click( function(eventObject) {
  alert(eventObject.target.id);
});
于 2013-03-12T13:09:10.810 に答える
0

または、イベントバインディングを共通にすることができます...

マークアップ。

<div>
    <canvas id='canvas1' style="width: 740px; height: 420px; background: red;"></canvas>
</div>
<div>
    <canvas id='canvas2' style="width: 740px; height: 420px; background: blue;"></canvas>
</div>

JS コード。

$(function() {
    $("canvas").click(function(e) {
        alert($(this).attr("id"));
    });
});
于 2013-03-12T13:39:09.567 に答える