javascript - Div 元素未引导点击以启用拖动功能

Question

在我的 jsfiddle.net/kwoxer/68h7ya6f/3/中，我有 2 个 Div。其中一个应该是一个菜单，另一个是在整个页面上的最后一个 SVG。 SVG 还有一个 zoom-event，如果没有点击菜单元素，它会在任何地方切换。

现在让我们来谈谈这个问题:

1. 当我从左上角单击并拖动鼠标时，我实际上选择了菜单 div 而不是 map div。
2. 如何让菜单元素周围的区域完全透明。我的意思是 background-color none 似乎不会通过 div 引导点击。
3. 顺便说一句，我在隐藏元素上也有同样的问题。 div所在的区域无法点击。因此，每次我将鼠标放在那里并拖动它时，我都会选择站点上的所有文本，而不是通过从 D3.js 拖放来移动我的 SVG 元素。好的，隐藏元素可以在开始时将宽度和高度设置为 0。但这不是解决方案，因为该 div 的元素可点击也应该是透明的。

所以我认为总的来说这是一个问题:我怎样才能获得一个 div clicktrough 以及拖放操作通过那里。

我已经尝试过以下方法:

• pointer-events:none;(没有意义，因为我希望菜单可点击)
• 背景:白色；不透明度:0； filter:Alpha(opacity=0);(完全不可见，而不仅仅是未使用的 div 空间)

我还没有尝试过的:

• 背景:url('透明.png');

存在此问题的示例网站:

http://lotrproject.com/map/在那里你可以看到，当你点击(BLOG，ABOUT，STORE)下的区域时，你无法移动 map 。其实我也有同样的问题。

那么最后那个区域怎么才能完全透明呢。谢谢你们。

编辑:一篇有趣的文章:http://blog.pixelastic.com/2010/07/23/click-html-element/

Answer 1

好吧，所以我做了一些挖掘，最后转到 Google map ，看看他们是如何解决这个问题的(因为你提到了一个 map 网站)。我做了一些常见的检查元素技巧，发现了你的 CSS 出了什么问题。在 Google map 上，搜索框(或 omnibox)实际上是用 absolute 悬空放置的。定位。在你的例子中，当我做同样的事情时，我发现 <ul>标签正在向菜单添加额外的填充和边距。所以我添加了 CSS 重置并得到了这个解决方案:JSFiddle (请检查“ fiddle 选项”)。我认为这将是解决您的问题的最简约和最佳的解决方案。