canvas + event handlers (HTML5)

Модератор: Модераторы разделов

Ответить
Аватара пользователя
broom
Бывший модератор
Сообщения: 1629
Статус: мизантроп.ка
ОС: Gentoo

canvas + event handlers

Сообщение broom »

Честно предупреждаю: во всяких этих веб-технологиях я новичок. Пытаюсь вот разобраться с HTML5.
На данный момент задачка простая:
делается canvas, по одинарному клику по нему должно произойти одно некое действие, по двойному клику некое другое действие. (В дальнейшем по этой канве предполагается рисовать мышкой некоторые фигуры.)

Непонятка заключается в следующем:
Добавлен eventListener на событие "click", по этому событию вызывается функция, содержащая alert. Но почему-то этот alert вылезает два раза подряд.
Даблклик вообще никогда не получается.
Браузер у меня Firefox 4 и 5.

Собственно, вопросы:
- почему alert вылезает дважды?
- где вообще найти полный список событий, применимых к canvas?
- как же сделать вызов разных функций на клик и даблклик? :)

Код простейший:

Код: Выделить всё

<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>canvas test</title>
<script type="text/javascript">

function init(){
        canvas = document.getElementById('canvas');
        ctx = canvas.getContext('2d');
        canvas.addEventListener("click", onclick, false);
        canvas.addEventListener("dblclick", dblclick, false);
}

function onclick(){
        alert("click");
}

function dblclick(){
        alert("double click");
}

</script>
<style type="text/css">
        canvas { border: 2px solid black; }
</style>

</head>

<body onload="init();">
        <canvas id="canvas" width="640" height="480"></canvas>

</body></html>


В действии этот код можно посмотреть по ссылке: http://83.167.103.135/html/test.html
but in the darkness, behind your smile, you scream... © Dio
Спасибо сказали:
Аватара пользователя
eddy
Сообщения: 3321
Статус: Красный глаз тролля
ОС: ArchLinux
Контактная информация:

Re: canvas + event handlers

Сообщение eddy »

Может, надо было ctx.addEventListener... ?

RTFM
-------
KOI8-R - патриотичная кодировка Изображение
Спасибо сказали:
Аватара пользователя
Bizdelnick
Модератор
Сообщения: 20752
Статус: nulla salus bello
ОС: Debian GNU/Linux

Re: canvas + event handlers

Сообщение Bizdelnick »

У меня один alert. В Chromium и Iceweasel. Двойной щелчок обрабатывается корректно, если выкинуть всё, что связано с одинарным.
Пишите правильно:
в консоли
вку́пе (с чем-либо)
в общем
вообще
в течение (часа)
новичок
нюанс
по умолчанию
приемлемо
проблема
пробовать
трафик
Спасибо сказали:
watashiwa_daredeska
Бывший модератор
Сообщения: 4038
Статус: Искусственный интеллект (pre-alpha)
ОС: Debian GNU/Linux

Re: canvas + event handlers

Сообщение watashiwa_daredeska »

http://stackoverflow.com/questions/1546040...k-on-an-element
http://p2p.wrox.com/javascript-how/21754-s...t-handlers.html

Вкратце: попробуй в обработчике не alert вызывать, а запускать таймер (setTimeout), который по истечение некоторого времени покажет алерт, чтобы диалоговое окно возникало не сразу после клика (оно блокирует dblclick).
Спасибо сказали:
Аватара пользователя
broom
Бывший модератор
Сообщения: 1629
Статус: мизантроп.ка
ОС: Gentoo

Re: canvas + event handlers

Сообщение broom »

Bizdelnick писал(а):
14.07.2011 00:12
У меня один alert. В Chromium и Iceweasel. Двойной щелчок обрабатывается корректно, если выкинуть всё, что связано с одинарным.

Вот прямо заходишь по данной ссылке, тыкаешь в поле, и получаешь только один alert? У меня в Firefox 5 он как бы тоже выглядит как один, но на ОК приходится нажимать два раза.
Про даблклик понятно, в общем-то ясно, почему он не работает.

Остальные советы обязательно проверю, но утром. :)
but in the darkness, behind your smile, you scream... © Dio
Спасибо сказали:
Аватара пользователя
Bizdelnick
Модератор
Сообщения: 20752
Статус: nulla salus bello
ОС: Debian GNU/Linux

Re: canvas + event handlers

Сообщение Bizdelnick »

broom писал(а):
14.07.2011 00:35
Вот прямо заходишь по данной ссылке, тыкаешь в поле, и получаешь только один alert? У меня в Firefox 5 он как бы тоже выглядит как один, но на ОК приходится нажимать два раза.

Сейчас ещё раз проверил - в Iceweasel почему-то стало два алерта. В Chromium по-прежнему один. То ли у меня крыша едет, то ли я ничего не понимаю...
Пишите правильно:
в консоли
вку́пе (с чем-либо)
в общем
вообще
в течение (часа)
новичок
нюанс
по умолчанию
приемлемо
проблема
пробовать
трафик
Спасибо сказали:
Аватара пользователя
/dev/random
Администратор
Сообщения: 5282
ОС: Gentoo

Re: canvas + event handlers

Сообщение /dev/random »

По поводу двойного щелчка уже всё объяснили.

По поводу двойного алерта при одинарном щелчке:
Глобальные переменные - это на самом деле поля объекта window.
"function onclick() { ... }" - это синоним для "window.onclick = function() { ... }".
Имеет смысл переименовать функцию.
Спасибо сказали:
Аватара пользователя
broom
Бывший модератор
Сообщения: 1629
Статус: мизантроп.ка
ОС: Gentoo

Re: canvas + event handlers

Сообщение broom »

/dev/random писал(а):
14.07.2011 01:56
По поводу двойного алерта при одинарном щелчке:
Глобальные переменные - это на самом деле поля объекта window.
"function onclick() { ... }" - это синоним для "window.onclick = function() { ... }".
Имеет смысл переименовать функцию.

Супер, сработало! Спасибо огромное.
but in the darkness, behind your smile, you scream... © Dio
Спасибо сказали:
Аватара пользователя
eddy
Сообщения: 3321
Статус: Красный глаз тролля
ОС: ArchLinux
Контактная информация:

Re: canvas + event handlers

Сообщение eddy »

Кстати, broom, советую вам вообще глобальных функций не делать. Я в свое время выступал против этого, пока сам на подобную ситуацию не нарвался.
Оформляем весь блок кода в "скобки", например:

Код: Выделить всё

canvasClick = function(){
// все функции
return{
 click: onclick,
 dblclick: ondblclick,
 init: init
 }
}();

Ну и всякие init, click меняем на canvasClick.init(); canvasClick.onclick() и т.п.
В глобальном пространстве имен будет висеть лишь объект canvasClick.
RTFM
-------
KOI8-R - патриотичная кодировка Изображение
Спасибо сказали:
watashiwa_daredeska
Бывший модератор
Сообщения: 4038
Статус: Искусственный интеллект (pre-alpha)
ОС: Debian GNU/Linux

Re: canvas + event handlers

Сообщение watashiwa_daredeska »

eddy писал(а):
14.07.2011 08:56
В глобальном пространстве имен будет висеть лишь объект canvasClick.
В данном случае можно и так, чтобы в глобальном пространстве вообще ничего не висело.

Код: Выделить всё

(function() {
  function init(){
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    canvas.addEventListener("click", function_click, false);
    canvas.addEventListener("dblclick", dblclick, false);
  }

  function function_click(e){
    setTimeout(
      function(){
        alert("click " + e.detail);
      }, 500);
  }

  function dblclick(e){
    setTimeout(
      function(){
        alert("double click " + e.detail);
      }, 500);
  }

  window.addEventListener("load", init, false);
})();
(и убрать onload у body). И в этом случае, кстати, можно называть функцию onclick — она будет локальной. А вот переменные в init надо объявлять через var, иначе они будут глобальными. Можно объявить их в безымянной функции уровнем выше, тогда canvas и ctx будут доступны и в других функциях кроме init, этакие module-level globals.
Спасибо сказали:
Аватара пользователя
broom
Бывший модератор
Сообщения: 1629
Статус: мизантроп.ка
ОС: Gentoo

Re: canvas + event handlers

Сообщение broom »

В общем, всем большое спасибо.
С кликом и даблкликом как-то слишком сложно выходило, поэтому сделала разные события на клик левой кнопкой и клик правой кнопкой.
От глобальных функций и переменных пока избавиться не удалось, потому что по-прежнему ничего не понимаю в этом вашем жаваскрипте. :)
Спасибо, что помогли разобраться, когда я уже почти отчаялась что-либо понять. :)
but in the darkness, behind your smile, you scream... © Dio
Спасибо сказали:
Ответить