Размещение HTML5 <canvas> внутри <table> сводит на нет события мыши

Question

Размещение HTML5 <canvas> внутри <table> сводит на нет события мыши

1

У меня есть объект canvas HTML5, который несколько раз использует метод addEventListener(), чтобы иметь возможность реагировать на события мыши. Используемые строки выглядят так:

canvas.addEventListener("mousemove", this.checkMouseLocation.bind(this, this.inputs), false);

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

После чтения Событие мыши не запускается на холсте html5, я решил попробовать это решение - добавить свойство style="-webkit-transform: translate3d(0, 0, 0);" к моему холсту. Это устранило проблему в Firefox, но в Chrome все еще не обращает внимания на мышь.

Есть ли у кого-нибудь идеи? Лучше всего предположить, что это имеет какое-то отношение к координатам мыши, хотя я не мог сказать вам, как это сделать.

Спасибо.

Adam Smith 20 март 2017, в 11:27

Источник

1

Из любопытства: почему у вас есть элемент <canvas> внутри <table> ? Элемент table используется для представления табличных данных, и я представляю, что не так много ситуаций, когда элемент canvas будет считаться табличными данными.
James Donnelly 20 март 2017, в 09:30
0

Холст используется для анимации - в данном случае логических элементов (и, или, и т. Д.). Поскольку их несколько, я хотел показать их все рядом.
Adam Smith 20 март 2017, в 20:43

Теги:

javascript

css

html5

html5-canvas

1 ответ

Ещё вопросы

Из любопытства: почему у вас есть элемент <canvas> внутри <table> ? Элемент table используется для представления табличных данных, и я представляю, что не так много ситуаций, когда элемент canvas будет считаться табличными данными.
Холст используется для анимации - в данном случае логических элементов (и, или, и т. Д.). Поскольку их несколько, я хотел показать их все рядом.

Adam Smith · Accepted Answer · 2017-03-20T23-51-00.000Z

Я нашел ответ для всех, кто идет за мной.

Мышцы не были полностью смешаны - они все еще продолжались. Однако координаты мыши и x были полностью отключены до такой степени, что они не отвечали на них.

Я вычислял координаты мыши, вычитая смещение холста из местоположения мыши, например:

var x = event.pageX - canvas.offsetLeft;
var y = event.pageY - canvas.offsetTop;

К сожалению, это не является надежным, поскольку смещения объекта canvas не всегда относятся к телу документа. Когда внутри таблицы они были относительно <td>, внутри canvas. Таким образом, координаты были удалены, что делает объект canvas совершенно неактивным для мыши.

Я заменил эти строки такими:

var rect = canvas.getBoundingClientRect();
var x = event.clientX - rect.left;
var y = event.clientY - rect.top;

Это кажется немного kludgey, так как боги знают только, насколько эффективна функция getBoundingClientRect(), и это означает, что я имею дело с координатами с плавающей запятой, а не с целыми координатами. Но вычисляемые x и y являются точными, и что более важно.

Я надеюсь, что это поможет кому-то еще по дороге.

С точки зрения производительности, gBCR должно быть примерно таким же, как .offsetLeft и .offsetTop , даже если последние выглядят как фиксированные свойства, они фактически пересчитываются точно так же, как gBCR. (конечно, могут быть некоторые минимальные различия, поскольку он создает DOMRect, но не о чем беспокоиться, если вы не вызываете его 10 тысяч раз в цикле.
Спасибо @Kaiido. У вас есть хороший источник информации о том, как определить, эффективна ли программа на JavaScript или нет? Помимо основных методов программирования (например, анализ сложности), это всегда ускользало от меня.