Получить идентификатор текущего холста при щелчке мыши

Как я могу получить текущий идентификатор холста, когда я нажал на него. На моей странице HTML, у меня есть два холста:Получить идентификатор текущего холста при щелчке мыши

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

Когда я нажал на одну из холста, как я могу получить идентификатор этого. Я пытался так:

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

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

Но оповещение не отображалась при нажатии на холсте .. Любые идеи ?? Заранее спасибо ..

источник

2013-03-12 Lokesh

Idea: Этот код js идет перед вашими элементами 'canvas' и вы не используете событие' ready'. –

использовать событие dom, чтобы знать все загруженные элементы. –

Спасибо за ответ. Я не использую готовое событие. Одна из моих функций я назвал это событие click. – Lokesh

использовать его с domready

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

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

demo

источник

2013-03-12 13:04:17

Я сделал это под if conditio..like this..if (drawObject.currentState == DrawState.Completed) { $ ('# canvas1'). Click (function() { alert ('Click on Canvas1'); }); $ ('# canvas2'). Click (function() { alert ('Нажмите на Canvas2'); }); } – Lokesh

что бы вы ни опубликовали, работающий прекрасный чувак ... но почему мой код не стрелял .. ?? – Lokesh

вы назначаете события щелчка перед загрузкой элементов, поэтому события не привязываются к элементам. –

Я думаю, вы должны назначить щелчок привязки после того, как документ будет готов, к примеру, как это:

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

Другим вариантом знать идентификатор будет то, что вы даете вашему холсту дополнительный класс. Затем связать событие щелчка на классе, а затем прочитать идентификатор из объекта события, как это:

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

источник

2013-03-12 13:09:10 Chris

Или вы можете сделать ваше мероприятие обязательным общим ...

Разметки.

<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-12 13:39:09 Kushal

Я использовал event.currentTarget.id, чтобы получить идентификатор dom холста. Я не знаю, насколько это здорово - я попрошу других взвесить. И я, по общему признанию, новичок в 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-12 07:51:48

Получить идентификатор текущего холста при щелчке мыши

ответ

Смежные вопросы