IE9 Переадресация событий мыши через элемент canvas для маскировки - PullRequest
5 голосов
/ 16 сентября 2011

Мои абсолютно позиционированные элементы холста блокируют все события мыши, так что ничто под ними не может быть щелкнуто, та же самая проблема упомянута здесь и здесь .

У меня есть несколько слоев холста, которые должны быть с определенным z-индексом, поэтому мне нужно перенаправлять события мыши через холсты. pointer-events: none; работает в хороших браузерах, но для IE9 мне нужен javascript, вот мое текущее решение,

 var evts = [ 'click', 'mousedown', 'mouseup', 'dblclick'],
                canvases = $('canvas');

            $.each(evts, function(_, event){
                canvases.bind(event, function(evt){
                    var target,
                        pEvent;
                    $(this).hide();
                    target = document.elementFromPoint(evt.clientX, evt.clientY); 
                    $(this).show();
                    pEvent = $.Event(event);
                    pEvent.target = target;
                    pEvent.data = evt.data;
                    pEvent.currentTarget = target;
                    pEvent.pageX = evt.pageX;
                    pEvent.pageY = evt.pageY;
                    pEvent.result = evt.result;
                    pEvent.timeStamp = evt.timeStamp;
                    pEvent.which = evt.which;
                    $(target).trigger(event, pEvent);
                 });
            });   

Рабочий пример, jsFiddle

Вопросы,

1. Я создаю новое событие и передаю соответствующие данные. Будет ли безопасно передать переменную evt с измененными target и currentTarget?

2. Как я могу распространить правый клик?

Или у кого-нибудь есть лучший способ сделать это? Другие связанные вопросы довольно старые.

1 Ответ

3 голосов
/ 08 февраля 2012

Нет чистого способа передачи кросс-браузера событий. Вы можете передать (измененное) событие, но вы не можете гарантировать, что оно будет работать так, как могло бы, естественно, особенно кросс-браузер.

Для правого клика используя ваш код, просто сделайте это: http://jsfiddle.net/6WMXh/20/

(вы наполовину использовали часть дополнительной информации jquery, но никогда ничего с ней не делали)

...