MouseListener и объект HTML5 canvas - PullRequest
Новая
       9

MouseListener и объект HTML5 canvas

7 голосов
/ 11 октября 2011

Я смотрел на учебники, и все же не могу понять, где я иду не так. Кажется, это должно быть очень прямым, но это доставляет мне проблемы. Ниже приведен простой код для создания слушателя мыши для объекта canvas. В настоящее время функция clickReporter не вызывается при щелчке по холсту. Есть идеи, почему бы и нет?

HTML5 

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Play Area 2 - Mouse Events and the Canvas</title>
    <script src="play_area_2.js" type="text/javascript"></script>
    </head>

    <body onload="init();">
    <canvas id="myCanvas" width="500" height="400">
    Your browser dosen't support the HTML5 canvas.</canvas><br />
    </body>
    </html>

JavaScript 

    var canvas;
    var context;

    function init() {
        canvas = document.getElementById("myCanvas");
        context = canvas.getContext("2d");

        drawBox();

        canvas.addEventListener('onclick', clickReporter, false);
    }

    function clickReporter(e) {
        alert("clicked");
    }

    function drawBox() {
        context.fillStyle = "black";
        context.strokeRect(20, 20, canvas.width-20, canvas.height-20);
    }

1 Ответ

21 голосов
/ 12 октября 2011

Вы должны использовать «click», а не «onclick». «on» используется только при установке его в качестве свойства (например, canvas.onclick = clickReporter). 

canvas.addEventListener('click', clickReporter, false);

UPDATE

Подробнее о кликах и онкликах.

Существует три способа присоединить прослушиватель событий к объекту в JavaScript:

  1. Через элемент .addEventListener. Когда вы используете это, вы указываете имя события, которое хотите установить. Например, «щелчок», или «наведение мыши», или «сенсорный запуск». В этом случае вы указываете фактическое имя события. Это полезно, потому что вы можете добавить более одного слушателя к событию. 

    canvas.addEventListener('click', clickReporter, false);
canvas.addEventListener('click', otherClickReporter, false);
// Both clickReporter and otherClickReporter will be called on a click event.

  2. Через элемент .onsomeevent (onclick, onmouseover, ontouchstart). Это старое соглашение, которое полностью стандартно и поддерживается в HTML5. Это очень простой способ установить прослушиватель событий, но у него есть свои недостатки. С помощью этого метода можно одновременно установить только одного прослушивателя событий: 

    canvas.onclick = clickReporter;
canvas.onclick = otherClickReporter;
// Only otherClickReporter will be called on a click event.

  3. Через сам HTML. Это где все конвенции начались. Вы можете определить событие непосредственно в HTML, очень как в предыдущем примере: 

    <canvas onclick="clickReporter()"></canvas>

    Это то же самое, что и ниже, при условии, что clickReporter присоединяется к объекту окна. 

    <canvas></canvas>
<script>
    canvasWeJustCreated.onclick = function() {clickReporter();}
</script>

Возможно, то, как вы это делаете, - лучший способ. Конечно, будут случаи, когда вы захотите использовать другие методы, например, при создании страницы на сервере или при попытке временно отключить прокрутку на iPhone, но для большинства приложений лучше всего использовать addEventListener.

...