игнорировать событие на элементе с borderradius

Question

Я хочу игнорировать событие click/touchstart на div с радиусом границы 50% (круг), когда он не нажимается на видимый круг (поэтому, когда вы нажимаете на угол div) ,

Я написал очень простую функцию (это не 100% точным, это обходной путь, потому что теперь это хорошо), чтобы проверить, если нажать на углу DIV:

http://codepen.io/anon/pen/zhwri

до сих пор так хорошо,

Проблема:

круг (.circle) будет вращаться с преобразованием (например, -webkit-преобразование: поворот (45 градусов), а теперь функция не будет работать правильно (возможно, из-за коробки модель и т. д.) есть ли способ f настроить, был ли я нажат на угол, когда div отображается с вращением? потому что координаты относятся к модели окна (я думаю), и это не то, что видит клиент.

Надеюсь, у меня вопрос ясен, возможно, есть другие способы понять, чем я предложил в своей функции?

благодарит за помощь!

обновление: я забыл сказать, что в этом случае SVG или Canvas не вариант (Питти :(), так и для всех, кто предлагает это: вы правы, но, к сожалению, не вариант :(

Answer 1

I предлагаем вам использовать элементы холста, например, с d3.js библиотеки http://d3js.org/, это будет намного проще выбрать сложные формы, такие как круги (и наблюдать за событиями).

Answer 2

проблема с этими заявлениями

eToParent['x'] = e.originalEvent.touches[0].clientX - $(e.target).offset().left; 
eToParent['y'] = e.originalEvent.touches[0].clientY - $(e.target).offset().top; 

.offset() не учитывает ваши преобразования CSS (т. Е. rotate(45deg)). Таким образом, для вашего примера вам придется вручную применить поворот к смещенному отчету вашего элемента.