HTML-фильтрация точек событий неинтерактивных элементов?

Question

HTML-фильтрация точек событий неинтерактивных элементов?

0

Я думаю о создании простой веб-игры с использованием API <canvas>. Я просмотрел библиотеки JavaScript для элементов GUI, которые отображаются непосредственно на холсте, и нашел некоторые, которые выглядят хорошо, например Zebra, но я бы предпочел придерживаться стандартных элементов управления DOM, созданных поверх холста. Тем не менее, я сталкиваюсь с проблемами с вводом мыши в ловушку с помощью <div> s, которую я использую, чтобы содержать кнопки, текстовые поля и т.д., Которые я хочу использовать.

Рассмотрим следующий образ или перейдите к этой скрипте, чтобы увидеть мой код.

Скриншот http://www.ekardnt.com/capture.PNG

Красный фон - это элемент холста, а синий фон - это div с четырьмя кнопками. И холст, и div имеют "положение: абсолютные" свойства CSS. Я добавил простые вызовы alert() в canvas и div onclick, чтобы показать, какие элементы захватывают ввод.

Я хочу, чтобы canvas 'onclick вызывался всякий раз, когда клик не попадал на кнопку. То есть, если я нажимаю на открытый синий фон контейнера div, я хочу, чтобы событие click "провалилось" на холст. В настоящее время, однако, div onclick вызывается как при нажатии кнопки, так и при нажатии на синюю область - разумное поведение по умолчанию, но неудобное для меня.

Есть ли способ получить поведение, которое я хочу? Я пробовал добавлять pointer-events: none в стиль div, но затем кнопки вообще не реагируют на ввод.

Drake 18 окт. 2013, в 23:23

Источник

0

Как насчет того, чтобы не использовать контейнер div для ваших кнопок? Вместо этого поместите: абсолютные кнопки на холсте. Если вы хотите синий фон для вашей группы кнопок, нарисуйте синий прямоугольник на холсте. Мое рассуждение состоит в том, что (как вы обнаружили) события указателя еще не были универсально приняты браузерами.
markE 18 окт. 2013, в 21:20

Теги:

html

css

canvas

1 ответ

Ещё вопросы

Как насчет того, чтобы не использовать контейнер div для ваших кнопок? Вместо этого поместите: абсолютные кнопки на холсте. Если вы хотите синий фон для вашей группы кнопок, нарисуйте синий прямоугольник на холсте. Мое рассуждение состоит в том, что (как вы обнаружили) события указателя еще не были универсально приняты браузерами.

Rob W · Accepted Answer · 2013-10-18T19-18-00.000Z

Добавить pointer-events: none; в контейнер #buttons и pointer-events:auto; к элементам кнопки. Затем щелчок по контейнеру будет "проваливаться", а кнопки остаются функциональными.

http://jsfiddle.net/GD4Da/18/

#buttons {
    /* ... */
    pointer-events: none;
}
#buttons button {
    pointer-events: auto;
}

Прекрасно работает в Firefox 24, не работает в IE 11 (кнопки вообще не реагируют на ввод с помощью мыши, предполагая, что «none» в div отменяет «auto» на кнопках). Есть ли обходной путь для IE, или я должен просто смеяться над этими пользователями?
@Drake Вы можете решить не использовать pointer-events в IE11 и использовать JavaScript для перенаправления событий на холсте, используя var event = document.createEvent('MouseEvents'); event.initMouseEvent( ... ) и element.dispatchEvent(event); ,