可相互点击的叠加元素

Question

好的，所以我发现了很多不太符合我需要的答案。这是我的场景：我在 javascript/html/css 中有一个应用程序。我有两个独立可旋转的叠加元素（在本例中为两个 svg），它们都具有需要可点击的元素，随着两个元素的旋转围绕它们的周边移动。一层有 7 个可点击点，另一层有 12 个可点击点，两者根据设置旋转目标度数的 onclick 事件旋转到给定点。只有点（即两个 svg 中每个圆半径边缘的小透明圆圈）需要可点击。我的问题是我放在最上面的任何一层都可以工作，但是另一层上的按钮然后停止工作，显然被另一层的背景挡住了。我试过在 Whosebug 上弄乱各种指针事件和其他一些想法，但都以相同的结果结束：一组按钮不起作用。它们需要位于不同的层上，以便旋转将它们实时旋转时放在正确的位置。欢迎任何想法。我正在寻找不需要库（包括 jquery）的答案，但是如果它可以用 jquery 完成，那么它可以在没有 jquery 的情况下完成——如果我能找到的话如何。有人有想法吗？

Answer 1

@dandavis 几乎就在这里，除了我认为他的意思是说 pointer-events: auto 。只是注意到没有正式的 'answer' posted。现在，标记这个，但如果你想重新 post 作为一个 'answer'，Dan，我很乐意将它标记为已接受的。