Div元素不会引导点击以启用拖动功能

Question

在我的jsfiddle.net/kwoxer/68h7ya6f/3/我有2个Div。其中一个是菜单，另一个是整个页面上的SVG。 SVG还有一个缩放事件，如果没有点击菜单元素，它将在任何地方切换。

现在让我们来讨论这个问题：

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

所以我认为整体问题是： 如何才能获得div clicktrough-able以及拖放操作 。

我已经尝试了以下内容：

• 指针 - 事件：无; （没有意义，因为我希望菜单可点击）
• 背景：白色;不透明度：0; filter：Alpha（opacity = 0）; （完全不可见，而不仅仅是未使用的div空间）

我还没有尝试：

• 背景：网址（ 'transparent.png'）;

此问题的示例网站：

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

所以最后该区域如何完全透明。谢谢你们。

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

Answer 1

好的，所以我做了一点挖掘，最终放到谷歌地图上，看看他们是如何摆脱这个问题的（因为你提到了一个地图网站）。我做了一些常见的Inspect Element技巧，发现你的CSS出了什么问题。在Google地图上，搜索框（或omnibox）实际上是通过absolute定位的边距悬挂在地方。在你的情况下，当我做同样的技巧时，我发现<ul>标签在菜单中添加了额外的填充和边距。所以我添加了CSS重置并得到了这个解决方案：JSFiddle（请检查“小提琴选项”）。我认为这将是解决您问题的最简约和最佳解决方案。

Answer 2

因此，解决方案是使用jquery扩展菜单，而不是使用固定的宽度或高度。这样菜单总是尽可能小。

可以肯定的是，在lotrproject的情况下这样做很难。因为那里有2行按钮。但目前没有其他办法。