Div元素并没有引导点击以启用拖动功能

Div element is not leading clicks through to enable drag functionalities

本文关键字：启用 拖动 功能 元素 并没有 Div      更新时间：2023-09-26

在我的jsfiddle.net/kvoxer/68h7ya6f/3/中，我有两个div。其中一个应该是菜单，另一个在最后是整个页面上的SVG。SVG还有一个缩放事件，如果没有单击菜单元素，该事件应在各处切换。

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

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

因此，我认为总的来说，这是一个问题：我如何才能获得一个可以点击的div，并拖动&下降操作通过那里。

我已经尝试了以下内容：

  • 指针事件：无（毫无意义，因为我希望菜单可以点击）
  • 背景：白色；不透明度：0；过滤器：Alpha（不透明度=0）（完全不可见，而不仅仅是未使用的div空间）

我还没有尝试的：

  • background:url（'transparent.png'）

此问题的示例网站：

http://lotrproject.com/map/在那里你可以看到，当你点击（博客，关于，存储）下的区域时，你无法移动地图。事实上，我也有同样的问题。

最后，这个区域怎么能完全透明呢。谢谢大家。

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

好吧，所以我做了一点挖掘，最终去了谷歌地图，看看他们是如何解决这个问题的（因为你提到了地图网站）。我做了一些常见的Inspect元素技巧，发现了CSS的问题所在。在谷歌地图上，搜索框（或omnibox）实际上是用absolute定位的边缘悬挂的。在您的情况下，当我使用相同的技巧时，我发现<ul>标记为菜单添加了额外的填充和边距。所以我添加了CSS重置，得到了这个解决方案：JSFiddle（请检查"Fiddle选项"）。我认为这将是你的问题的最简单和最佳的解决方案。

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

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

相关文章：