Использование HTML-холста в IE9 со свойством z-index

Question

Примечание : Этот вопрос не об обычной ошибке z-index, на которую ссылаются во всем Интернете.Свойство z-index правильно учитывается при отображении.

Привет,

Я разработал интерфейс рисования на основе JavaScript для веб-сайта.Он генерирует прозрачный холст поверх существующей страницы и позволяет рисовать на нем указателем мыши для получения информации.

Так что в моем коде JavaScript я динамически создаю этот холст и связываю высокий z-индексэто, чтобы поставить его на передний план.

Мое решение уже работает на веб-браузерах, не использующих Internet Explorer.Бета-версия Internet Explorer 9 теперь поддерживает Canvas, поэтому я обновил свой код до IE9-совместимого.

Теперь возникает моя проблема: В IE9 прозрачный холст правильно отображается сверхустраницы, и я могу рисовать на нем.Но когда мой указатель мыши перемещается поверх другого HTML-элемента, он меняется, и события мыши больше не фиксируются на холсте.Например, при перемещении поверх текстового поля курсор мыши меняется с указателя «по умолчанию» на указатель «текст», и при нажатии я выбираю текст вместо рисования.

Я попытался установитьнепрозрачность до 1 в случае, если это была ошибка непрозрачности, но даже если текстовое поле не отображается, оно остается активным.

Кто-нибудь уже сталкивался с такой проблемой?Я думаю, это недостаток использования бета-версии продукта; -)

Спасибо.Pierre

Answer 1

Я наконец-то смог решить мою проблему.Это не проблема IE9, а глобальная проблема Internet Explorer.

Объяснение состоит в том, что холст - это элемент без ветров, тогда как мои текстовые элементы являются оконными.Чтобы отключить оконные элементы, мне пришлось вставить слой iframe поверх других элементов с непрозрачностью 0 и размером моего холста того же размера.

iframe можно динамически создать следующим образом:1005 *

this.iframe = document.createElement('iframe');
this.iframe.frameBorder=0;
this.iframe.style.display='block';
this.iframe.style.position='absolute';
this.iframe.style.left = '0px';
this.iframe.style.top = '0px';
this.iframe.style.zIndex = 1000;
this.iframe.style.opacity = 0;
this.container.appendChild(this.iframe);

Поскольку это элемент без окон и окон, он может иметь приоритет над элементами текста и изображения.

Надеюсь, это поможет.Pierre