Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Ретрансляция событий (https://javascript.ru/forum/events/48044-retranslyaciya-sobytijj.html)

Esigns 17.06.2014 17:27

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

Есть ли способ ретрансляции всех событий мышки с маски на канвас?
Спасибо.

Sweet 17.06.2014 18:34

Просто указать ретранслируй отсюда-суда нельзя. Поэтому вариантов решения проблемы куча. Например, не навешивать обработчик на канвас (.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.
В общем, вариантов много. Думай сам.

Aetae 17.06.2014 23:17

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

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

Esigns 18.06.2014 11:24

Спасибо всем за советы.
Aetae:
Разница "на чем висит событие" в том, что я использую фреймворк для работы с канвой и соответственно движок фреймворка самостоятельно работает с большинством событий(к примеру самостоятельно определяет навел ли я мышу на обьект в канве и тд.). Отказываться от готового движка чревато потерей времени.

Esigns 18.06.2014 11:48

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


Часовой пояс GMT +3, время: 10:02.