Div 元素未引导点击以启用拖动功能
Div element is not leading clicks through to enable drag functionalities
在我的 jsfiddle 中。net/kwoxer/68h7ya6f/3/ 我有 2 个 Div。其中一个应该是一个菜单，另一个是在整个页面上的最后一个 SVG。 SVG 还有一个 zoom-event，如果没有点击菜单元素，它会在任何地方切换。
现在让我们来谈谈这个问题：
- 当我从左上角单击并拖动鼠标时，我实际上 select 菜单 div 而不是地图 div。
- 如何让菜单元素周围的区域完全透明。我的意思是 background-color none 似乎不会通过 div 引导点击。
- 顺便说一下，我在隐藏元素上遇到了同样的问题。 div所在的区域无法点击。因此，每次我将鼠标放在那里并拖动它时，我 select 站点上的所有文本，而不是通过从 D3.js 拖放来移动我的 SVG 元素。好的，隐藏元素可以在开始时将宽度和高度设置为 0。但这不是解决方案，因为 div 的元素可点击也应该是透明的。
所以我认为总的来说这是个问题：我怎样才能得到一个 div 可以点击并通过那里进行拖放操作.
我已经尝试过以下方法：
- pointer-events:none;（没有意义，因为我希望菜单可点击）
- 背景：白色； opacity:0; filter:Alpha(opacity=0);（完全不可见，而不仅仅是未使用的 div space）
我还没有尝试的：
- 背景：url('transparent.png');
存在此问题的示例网站：
http://lotrproject.com/map/ 在那里你可以看到当你点击（BLOG，ABOUT，STORE）下的区域时你不能移动地图。其实我也有同样的问题。
那么最后那个区域怎么可能是完全透明的。谢谢大家。
编辑：一篇关于此的有趣文章：http://blog.pixelastic.com/2010/07/23/click-html-element/
好的，所以我做了一些挖掘，最终转到 Google 地图，看看他们是如何解决这个问题的（因为你提到了一个地图网站）。我做了一些常见的 Inspect Element 技巧，发现了你的 CSS 出了什么问题。在 Google 地图上，搜索框（或 omnibox）实际上以 absolute 定位悬空放置。在您的情况下，当我使用相同的技巧时，我发现 <ul> 标记正在向菜单添加额外的填充和边距。所以我添加了 CSS 重置并得到了这个解决方案：JSFiddle（检查 "Fiddle Options"）。我认为这将是解决您的问题的最简约和最佳的解决方案。
所以解决方案是用 jquery 扩展菜单，而不是固定宽度或高度。这样菜单总是尽可能小。
对于 lotrproject 来说，这肯定很难做到。因为那里有两行按钮。但是目前没有别的办法。
在我的 jsfiddle 中。net/kwoxer/68h7ya6f/3/ 我有 2 个 Div。其中一个应该是一个菜单，另一个是在整个页面上的最后一个 SVG。 SVG 还有一个 zoom-event，如果没有点击菜单元素，它会在任何地方切换。
现在让我们来谈谈这个问题：
- 当我从左上角单击并拖动鼠标时，我实际上 select 菜单 div 而不是地图 div。
- 如何让菜单元素周围的区域完全透明。我的意思是 background-color none 似乎不会通过 div 引导点击。
- 顺便说一下，我在隐藏元素上遇到了同样的问题。 div所在的区域无法点击。因此，每次我将鼠标放在那里并拖动它时，我 select 站点上的所有文本，而不是通过从 D3.js 拖放来移动我的 SVG 元素。好的，隐藏元素可以在开始时将宽度和高度设置为 0。但这不是解决方案，因为 div 的元素可点击也应该是透明的。
所以我认为总的来说这是个问题：我怎样才能得到一个 div 可以点击并通过那里进行拖放操作.
我已经尝试过以下方法：
- pointer-events:none;（没有意义，因为我希望菜单可点击）
- 背景：白色； opacity:0; filter:Alpha(opacity=0);（完全不可见，而不仅仅是未使用的 div space）
我还没有尝试的：
- 背景：url('transparent.png');
存在此问题的示例网站：
http://lotrproject.com/map/ 在那里你可以看到当你点击（BLOG，ABOUT，STORE）下的区域时你不能移动地图。其实我也有同样的问题。
那么最后那个区域怎么可能是完全透明的。谢谢大家。
编辑：一篇关于此的有趣文章：http://blog.pixelastic.com/2010/07/23/click-html-element/
好的，所以我做了一些挖掘，最终转到 Google 地图，看看他们是如何解决这个问题的（因为你提到了一个地图网站）。我做了一些常见的 Inspect Element 技巧，发现了你的 CSS 出了什么问题。在 Google 地图上，搜索框（或 omnibox）实际上以 absolute 定位悬空放置。在您的情况下，当我使用相同的技巧时，我发现 <ul> 标记正在向菜单添加额外的填充和边距。所以我添加了 CSS 重置并得到了这个解决方案：JSFiddle（检查 "Fiddle Options"）。我认为这将是解决您的问题的最简约和最佳的解决方案。
所以解决方案是用 jquery 扩展菜单，而不是固定宽度或高度。这样菜单总是尽可能小。
对于 lotrproject 来说，这肯定很难做到。因为那里有两行按钮。但是目前没有别的办法。