Div元素无法引导点击以启用拖动功能

Question

在我的jsfiddle.net/kwoxer/68h7ya6f/3/中，我有2个Div。 其中一个应为菜单，另一个应为整个页面上的SVG。 SVG还具有一个缩放事件，如果未单击菜单元素，则该缩放事件将在各处切换。

现在来看问题：

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

因此，我认为总体而言，这是一个问题： 如何获得可通过div点击的通道以及如何在其中进行拖放操作 。

我已经尝试了以下方法：

• 指针事件：无; （没有意义，因为我希望菜单可以单击）
• 背景：白色; 不透明度：0; 滤波器：阿尔法（不透明度= 0）; （完全不可见，而不仅仅是未使用的div空间）

我还没有尝试的内容：

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

带有此问题的示例网站：

http://lotrproject.com/map/可以看到，当您单击（博客，关于，存储）下的区域时，您将无法移动地图。 其实我有同样的问题。

因此，最后该区域如何完全透明。 感谢大伙们。

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

Answer 1

好的，所以我做了一些挖掘工作，最后去了Google Maps，看看他们是如何解决这个问题的（因为您提到的是地图网站）。 我做了一些常见的Inspect Element技巧，发现CSS出了什么问题。 在Google Maps上，“搜索”框（或omnibox ）实际上是通过absolute定位而留在omnibox 。 在您的情况下，当我做相同的技巧时，我发现<ul>标签在菜单上添加了额外的填充和边距。 因此，我添加了CSS重置并获得了以下解决方案： JSFiddle （请检查“ Fiddle选项”）。 我认为这将是解决您问题的最简单和最佳方法。

Answer 2

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

当然，在lotrproject的情况下很难做到。 因为那里有两行按钮。 但是目前没有其他方法。