Игнорировать взаимодействие мыши с прозрачными частями на изображении и назначить его изображению ниже

Question

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

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

Answer 1

Карта изображения должна это сделать.

Answer 2

Один из методов, хотя, возможно, и не обязательно самый эффективный, состоит в том, чтобы скопировать верхнее / нажатое изображение на холст и посмотреть на него значение цвета пикселя, на котором щелкнул пользователь. Если альфа-значение этого пикселя прозрачно, вызовите onclick базового изображения (или просто верните false, если базовое изображение также автоматически получает событие click, я не уверен, будет ли это или нет). Я не совсем уверен, сколько времени займет такая обработка.

Обновление: я только что реализовал этот метод, и нет заметной задержки при копировании изображения на холст и проверке его пикселя.

Answer 3

Боюсь, это вряд ли возможно. Ограничительные рамки для элементов HTML имеют прямоугольную форму даже для элементов с прозрачностью. Именно для этой ограничительной рамки запускаются события мыши.

Событие будет распространяться через родительские элементы, поэтому, если ваш другой элемент является одним из родительских, вы все равно можете зафиксировать событие click, но оно сработает для обоих элементов.