忽略带有borderradius的元素上的事件

时间:2013-07-15 14:41:10

标签: javascript css3

如果没有点击可见圆圈,那么我想忽略边框半径为50%(圆圈)的div上的click / touchstart事件(所以当你点击div的一角时)。

我确实编写了一个非常简单的功能(它不是100%精确,它是一种解决方法,现在很好)来检查你是否点击了div的一角:

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

到目前为止一切顺利,

问题:

圆圈(.circle)会随着变换而旋转(例如-webkit-transform:rotate(45deg);现在函数将无法正常工作(可能是因为盒子模型等)有什么办法可以计算当div用旋转渲染时我是否在角落点击了?因为坐标是指盒子模型(我猜)而不是客户看到的。

希望我的问题很明确,也许还有其他方法可以解决我在我的功能中建议的方式吗?

感谢您的帮助!

更新:我忘了说在这种情况下SVG或Canvas不是一个选项(pitty :(),所以对于每个提出这个建议的人:你是对的,但遗憾的是不是一个选择:(

2 个答案:

答案 0 :(得分:0)

我建议您使用canvas元素,例如使用d3.jshttp://d3js.org/,选择圆形(并观察事件)等复杂形状会更加简单。

答案 1 :(得分:0)

问题在于这些陈述

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))考虑在内。因此,对于您的示例,您必须手动将旋转应用于元素的报告偏移量。