jquery - 鼠标点击时获取当前Canvas的Id

Question

当我单击它时，如何获取画布的当前 ID。在我的 Html 页面中，我有两个画布：

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

当我单击其中一个画布时，如何获取它的 ID。我试过这样：

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

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

但是，单击画布时没有显示任何警报.. 有什么想法吗？提前致谢..

Answer 1

与 domready 一起使用

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

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

演示

Answer 2

我认为您必须在文档准备好后分配点击绑定，例如：

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

知道 id 的另一个选择是你给你的画布一个额外的类。然后在类上绑定 click 事件，然后从事件对象中读取 id，如下所示：

$(".canvasclass").click( function(eventObject) {
  alert(eventObject.target.id);
});

Answer 3

我使用 event.currentTarget.id 来获取画布的 dom ID。我不知道它有多强大——我会请其他人参与进来。而且，我承认我是 JavaScript 的新手。

首先将 click 事件处理程序绑定到相关的每个画布。然后，查询事件对象以获取 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
}

Answer 4

或者你可以让你的事件绑定通用......

标记。

<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"));
    });
});