Ретрансляция событий
У меня в хтмл такая структура:
Тег <canvas> и поверх него png картинка-маска: <img src="mask.png">. Которая в нужных местах прозрачная(для видимости канвас) и полностью закрывает канву где это нужно. Все выглядит хорошо, пока не начинается работа с канвас. Пример: скажем по событию mousedown нужно начать перетягивание чего-то там на канвас, но из-за того что тег <canvas> закрыт картинкой это сделать нельзя. Есть ли способ ретрансляции всех событий мышки с маски на канвас? Спасибо. |
Просто указать ретранслируй отсюда-суда нельзя. Поэтому вариантов решения проблемы куча. Например, не навешивать обработчик на канвас (.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. В общем, вариантов много. Думай сам. |
А какая разница на чём событие? Пусть себе висит на картинке - разницы то никакой вообще: просто вызывай по событиям картинки функции работающие с canvas, какие проблемы?
P.S. Есть такое некроссбраузерное css свойство: pointer-events: none которое сделает то что, ты хочешь; но всё-таки лучше подумай о моих словах. |
Спасибо всем за советы.
Aetae: Разница "на чем висит событие" в том, что я использую фреймворк для работы с канвой и соответственно движок фреймворка самостоятельно работает с большинством событий(к примеру самостоятельно определяет навел ли я мышу на обьект в канве и тд.). Отказываться от готового движка чревато потерей времени. |
Все сработало, спасибо. ponter-events то что нужно.
|
Часовой пояс GMT +3, время: 10:02. |