问题标签 [pointer-events]

现在我正在努力解决一个问题。请看下面的代码，我想实现两个功能，一个是放大容器（即缩放容器中的所有节点），二是提醒容器中节点的id，当鼠标在它上面。

但是，当我将 rect 的“pointer-event”的值设置为 all 时，缩放很好，但节点无法捕获 mouseover 事件。当我将值设置为“无”时，节点可以捕获鼠标悬停事件，但缩放不起作用。似乎“节点”和“矩形”位于不同的层，因此无法同时捕获事件。

有人知道如何解决这个问题吗？提前致谢。

我有一个用按钮覆盖 div 的 SVG。我知道我可以通过设置“指针事件：无”来通过 SVG 传递鼠标事件；对于我的 SVG。但是，当我这样做时，SVG 将不再识别鼠标事件。

我希望我的 SVG 能够识别鼠标何时悬停在其上方，但将点击传递给其下方的元素（div/按钮/...）。所以我的 SVG 应该只是悬停事件的目标，我的按钮应该是点击事件的目标。

在其他一些方法中，我尝试过这样的： - 没有任何效果。

这个想法是在我按下鼠标按钮时禁用指针事件，并在我释放它时再次启用它们。

有谁知道这个问题的解决方案或解决方法？谢谢！

http://jsfiddle.net/aintnobody/0L1yumpe/

与相同的代码

http://www.aintnobodymusic.com/monkey

问题：在小提琴上，一切正常。在所有情况下，上面的图像都会通过指针事件被忽略：无，并且点击会传递到下面的任何内容。我们可以通过底部两个的事件侦听器来判断这一点，并且由于前 4 个是 youtube iframe 嵌入，我们可以判断是因为点击开始了视频（这些是实时视频，顺便说一句，所以请务必点击中心或您可能会被带到 youtube）。

所以，一切都很好......直到我把它放在一个网站上。我在本地和托管环境中都尝试了四次，我总是得到相同的结果：底部的两个表现如预期，点击穿过图像到下面的 div。但是，如果上面的图片覆盖了 100% 的像素，则 iframe (youtube) 不会注册点击。即使只有一个像素被曝光，它也会按应有的方式点击通过。这就是为什么存在“短”集的原因。这些视频上方的图像比下方的视频窄一个像素。

但是，在 Firefox 中，100% 覆盖的视频不会触发。它在我迄今为止测试过的 Chrome 和 Safari 中运行良好，但在 Firefox 中却不行。

我在任何地方都找不到一个提到这个问题的地方。

我已经进行了一次又一次的测试，以缩小这里发生的情况。

这是youtube的问题吗？火狐的问题？iframe 问题？这可能与 iframe 上缺少源标签有关吗？也许我的文档头部与小提琴的配置有些不同？我也在codepen上尝试过类似的方法，它工作得很好（点击通过）......直到我把它放在一个网站上并使用firefox。

编辑添加：刚刚在codepen上做了简化的情况，点击在那里很好，但不是当我主持时：

http://codepen.io/oompaLoompa/pen/QwqRER

和CSS：

我想在智能手机上忽略我网站上的一个 CSS。

这是我想忽略的CSS：

也许我必须使用这个：

不是很明白，谢谢你的帮助！

编辑 ：

我想禁用触发 tr 标签上悬停的行为，特别是在带有单词“COLUMNA”的空间上。

奇怪的是，谷歌浏览器显然禁止点击底层元素，您可以在 Chrome 上运行代码，它具有我需要的确切行为，但在 Firefox 上，当我将光标放在带有单词“COLUMNA”的空间上时，它确实会触发悬停.

我将如何处理这个以使行为显示在 Chrome 上，但在 FireFox 上？

这是我的代码：

我正在尝试检测部分重叠的 SVG 元素上的 mousemove 事件，如图所示

小提琴

现在，当将鼠标悬停在蓝色/红色交叉点上时，我想检测这两个元素上的鼠标事件，蓝色/橙色组合也是如此。正如您在日志中看到的那样，在这些情况下，当前仅针对位于顶部的蓝色框触发事件。

这与指针事件有关，因为我可以通过将蓝色元素的指针事件设置为 none来让红色和橙色元素在悬停蓝色元素时触发事件。但是我没有得到蓝色框的事件，所以这也不是一个可行的选择。

我将使用任何一个库来解决这个问题。我在这个 d3 示例中查看了事件冒泡，但这仅适用于嵌套在 DOM 中的元素。我有许多独立的元素，它们可能与许多其他元素重叠，因此不能以这种方式构建我的 DOM。

我猜最后的手段是找到当前鼠标位置的元素，并手动触发事件。因此，我查看了document.elementFromPoint()，但这只会产生 1 个元素（并且可能不适用于 SVG？）。我在 中找到了jQuerypp函数，该函数在给定位置找到元素，请参见此处。这个例子看起来很棒，除了它是 DIV 而不是在 SVG 中。当用 svg 矩形元素替换 div 时，fiddle 似乎中断了。

我该怎么办？！

我有一个 Web 应用程序，我想在其中处理 javascript 中的捏缩放手势，而不是允许浏览器缩放所有 UI。在 IE11 中，我的理解是您需要在要为其处理指针事件的元素上指定触摸动作 CSS。

在我的应用程序中，我禁用了除平移之外的所有触摸行为（触摸动作：pan-x pan-y）。我已经在javascript中连接了pointerdown、pointerup和pointermove事件，并添加了我自己的计算来确定基于两个活动指针之间的距离（捏合手势）执行的缩放级别。

在桌面上的 IE11 中，这完全符合我的预期；但是，在 IE 的移动/地铁版本上（我一直在 Surface Pro 上进行测试），我似乎永远无法在给定时间检测到多个指针事件。它只是在第一个捕获的事件上触发pointercancel，而无法触发第二个pointerdown。如果我禁用所有触摸手势（触摸操作：无），我也可以在移动浏览器中获取多点触摸指针事件，但它不再允许平移，这是不可取的。

这是一个演示该问题的简单 jsfiddle：

http://jsfiddle.net/wqgg0Ly7/22/

如果您在支持触摸的设备上的 IE11 桌面版本中对此进行测试，您可以捏住这些 DIV 中的任何一个，您将看到检测到两个指针的警报。在 IE11 mobile 上做同样的测试，只有第一个 DIV 会检测到第二个指针；但是，它不允许像第二个 DIV 那样平移。

这仅仅是 IE Metro 中的一个错误，还是有一种解决方法允许平移一个元素但仍捕获多个指针事件？

我正在尝试创建一个过马路的游戏，我为桌面版做过，我可以通过使用钥匙过马路来移动玩家，但现在我想为移动版做，知道如何添加钥匙来移动移动设备上的播放器。谢谢

我创建了一个方形 div，我想知道屏幕上 div 中有多少指针触发了指针向下事件；指针事件中没有像 event.touches.length 这样的属性，所以我使用一个计数器变量来计算 div 内的手指向下（即指针向下事件）的次数，并实现以下条件：
1. div 内的指针向下， counter 加 1。
3. 在 div 内向下指针（counter 加 1），在 div 内释放指针，counter 减 1。
3. 在 div 内指针向下（counter 加 1），移到 div 外，在 div 外释放div，counter 仍然是负 1。
4. 指针在 div 外部向下和指针向上（单击外部），counter 什么也不做。

我的程序是这样的：

一般来说，我们只使用一只鼠标，所以没有问题发生。但是指针事件发生了问题。比如我左手食指在div里面touch down，pointer down事件被触发，此时counter为1；但是我右手的食指在 div 外“点击”，指针向上事件在这里触发，所以我的计数器得到一个错误的数字 0。（我的左手食指仍然按下）

我不希望在 div 之外发生点击事件（pointerdown 和 pointerup 都在 div 之外触发）影响我的计数器。

如果有办法确定我的指针向上事件与哪个指针向下事件相关？

就像触摸开始事件和触摸结束事件的事件目标一样，所以我可以知道它们是相关的。

提前致谢。

我发现了一个问题，尝试在 Safari 5.1.7 for Windows 中的 SVG 上使用 pointer-events:none 不起作用，但在 div 上完美运行。我将如何去检测对此使用的支持；Vanilla JavaScript 或 Modernizr 为此类独特的用例提供后备。这是一个演示问题的小提琴 - http://jsfiddle.net/DLEsn/75/