Ретрансляция событий
У меня в хтмл такая структура:
Тег <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, время: 02:24. |