Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.06.2014, 17:27
Аспирант
Отправить личное сообщение для Esigns Посмотреть профиль Найти все сообщения от Esigns
 
Регистрация: 27.09.2012
Сообщений: 62

Ретрансляция событий
У меня в хтмл такая структура:
Тег <canvas> и поверх него png картинка-маска: <img src="mask.png">. Которая в нужных местах прозрачная(для видимости канвас) и полностью закрывает канву где это нужно. Все выглядит хорошо, пока не начинается работа с канвас.
Пример: скажем по событию mousedown нужно начать перетягивание чего-то там на канвас, но из-за того что тег <canvas> закрыт картинкой это сделать нельзя.

Есть ли способ ретрансляции всех событий мышки с маски на канвас?
Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 17.06.2014, 18:34
Профессор
Отправить личное сообщение для Sweet Посмотреть профиль Найти все сообщения от Sweet
 
Регистрация: 16.03.2010
Сообщений: 1,618

Просто указать ретранслируй отсюда-суда нельзя. Поэтому вариантов решения проблемы куча. Например, не навешивать обработчик на канвас (.addEventListener), а вызывать нужный метод из обработчика картинки. Или инициализировать другое событие и вызывать его у канвы. Тип того:
<style>
div { position: absolute; height: 200px; width: 200px; }
</style>

<div id="lowerDiv"></div>
<div id="topDiv"></div>

<script>

lowerDiv.addEventListener("click", function (event){
  alert(event.type);
});

topDiv.addEventListener("click", function (event){
  lowerDiv.dispatchEvent(new MouseEvent("click", event));
});

</script>

Но в примере используется MouseEvent с проблемами кроссбраузерности. Объяснять кроссбраузерный вариант долго: гугли document.createEvent.
Либо, если у тебя jQuery, то используй метод .trigger.
В общем, вариантов много. Думай сам.

Последний раз редактировалось Sweet, 17.06.2014 в 18:36.
Ответить с цитированием
  #3 (permalink)  
Старый 17.06.2014, 23:17
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,491

А какая разница на чём событие? Пусть себе висит на картинке - разницы то никакой вообще: просто вызывай по событиям картинки функции работающие с canvas, какие проблемы?

P.S. Есть такое некроссбраузерное css свойство: pointer-events: none которое сделает то что, ты хочешь; но всё-таки лучше подумай о моих словах.
__________________
29375, 35

Последний раз редактировалось Aetae, 17.06.2014 в 23:19.
Ответить с цитированием
  #4 (permalink)  
Старый 18.06.2014, 11:24
Аспирант
Отправить личное сообщение для Esigns Посмотреть профиль Найти все сообщения от Esigns
 
Регистрация: 27.09.2012
Сообщений: 62

Спасибо всем за советы.
Aetae:
Разница "на чем висит событие" в том, что я использую фреймворк для работы с канвой и соответственно движок фреймворка самостоятельно работает с большинством событий(к примеру самостоятельно определяет навел ли я мышу на обьект в канве и тд.). Отказываться от готового движка чревато потерей времени.
Ответить с цитированием
  #5 (permalink)  
Старый 18.06.2014, 11:48
Аспирант
Отправить личное сообщение для Esigns Посмотреть профиль Найти все сообщения от Esigns
 
Регистрация: 27.09.2012
Сообщений: 62

Все сработало, спасибо. ponter-events то что нужно.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ползунок JQuery: несколько событий? Veterinar jQuery 9 10.01.2014 20:57
Переопределение событий lispik jQuery 4 13.01.2011 12:30
Кто чем пользуется для генерации событий при модульном тестировании? MVH Events/DOM/Window 0 30.12.2010 17:10
Скопировать обработчики событий с одного элемента на другой. Jurasmi Events/DOM/Window 3 10.11.2010 19:03
очередь событий прерывается alertом puchu Events/DOM/Window 8 16.07.2010 00:54