javascript - 忽略具有 borderradius 的元素上的事件

Question

我想忽略边框半径为 50%(圆)的 div 上的 click/touchstart 事件，当它未在可见圆上单击时(因此当您单击 div 的一 Angular 时)。

我确实写了一个非常简单的函数(它不是 100% 精确的，它是一种变通方法，现在它很好)来检查你是否点击了 div 的一个 Angular :

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

到目前为止一切顺利，

问题:

圆圈 (.circle) 将随变换旋转(例如 -webkit-transform: rotate(45deg); 现在该功能将无法正常工作(可能是因为盒子模型等)有没有办法计算当 div 旋转呈现时，我是否点击了一个 Angular ？因为坐标指的是盒子模型(我猜)，而那不是客户看到的。

希望我的问题很清楚，也许还有其他方法可以解决我在函数中建议的方法？

感谢您的帮助!

更新:我忘了告诉你，在这种情况下，SVG 或 Canvas 不是一个选项(可怜 :( )，所以对于每个提出这个建议的人:你是对的，但不幸的是不是一个选项 :(

Answer 1

我建议您使用 Canvas 元素，例如 d3.js 库 http://d3js.org/ , 选择圆形等复杂形状(并观察事件)会简单得多。