问题标签 [pointer-events]

标题的本质在我的示例中进行了描述和呈现。我的任务是制作伪形状。您需要将鼠标悬停在画布元素（三角形）上，画布接受{pointer-events:all}的属性，并小心使用此元素{pointer-events:none}。如何使用框架 konvajs 做到这一点。

我想禁用除单击之外的所有鼠标事件，我有这个：

但是指针事件：无；禁用所有事件。

我有两个相互重叠的菜单，它们根据单击特定锚点而相互转换。让我们称它们为.defaultMenuand .secondMenu，锚点是.showSecondMenu并且要返回，您必须单击.hideSecondMenu。它们之间的过渡包括不透明动画。通常我display: none习惯于忽略“隐藏”菜单的点击，但这一次display: none不是一个选项。

我已经找到了一个使用的主题pointer-event: none，但这不适用于 IE9/10。因此，我正在寻找一种简单的方法来在两个相互重叠的菜单之间进行转换，但只有活动菜单项是可点击的。

整个想法是，当菜单从.defaultMenu到.secondMenu（和向后）转换时，活动菜单会淡出，而新的隐藏菜单会淡入。

如前所述，它应该与 IE9/10 兼容。

我正在尝试通过 iframe 加载导航标题，以便各种网站都可以拥有相同的导航栏。我知道还有其他方法可以实现这一点（例如 jQuery 加载），但我想尝试让它与 iframe 一起使用。为了让它工作，我给了 iframe 整个页面的大小。

http://jsfiddle.net/7sLfq433/1/

不幸的是，使用此代码无法单击 iframe 下方的项目。我能够通过提供 iframe 来解决这个问题pointer-events: none;

http://jsfiddle.net/7sLfq433/2/

但是，有了这个属性，就不可能使用任何导航栏操作。

是否可以关闭pointer-events除导航栏以外的所有内容？如果可以修改导航栏本身 ( https://gist.github.com/dehli/bdddc8b66151b0a87643 ) 以便在包含 iframe 时只需进行最少的更改，那将是理想的选择。

另一种选择是为 iframe 提供较低的 z-index，并修改下拉菜单，使其具有较高的 z-index。是否可以修改 iframe 中内部元素的 z-index？

http://jsfiddle.net/7sLfq433/4/

我正在构建一个单独的 div 位于另一个之上的站点。当您将鼠标悬停在顶部 div 上时，我希望它在您悬停在它上方时消失，并且您应该能够单击它。

起初我以为

和

然而，只有 opcaity 0 就可以解决问题；你不能通过 div 和 pointer-events: none 点击；它不会褪色。有人对此有解决方案吗？

关键是aside当您将鼠标悬停在图像上时让元素进入，仅使用 CSS，但也让其子级接受点击事件。

到目前为止，我所拥有的是一个功能正常的动画悬停，其中有一个按钮，并且该按钮确实对点击事件起作用。我pointer-events: none在滑动aside元素上使用过，因为否则动画会跳到断点，所以，pointer-events: none只要你悬停，动画就会流畅且持久。

当您将鼠标悬停在按钮上时会出现问题。它将使aside过渡出来（见小提琴，它比我蹩脚的英语要好）。

我正在寻找一种方法来防止它aside返回到其初始隐藏位置。当然，挑战在于仅使用 CSS！

这是代码（它也在小提琴中）：

HTML：

CSS：

是否可以在 Javascript 中处理超过 2 个手指的触摸事件？在我的测试中，添加第三根手指时事件会停止触发。我使用 jQuery 和官方 jQuery 插件创建了一个示例：Pointer Events Polyfill。使用 Wacom Cintiq 22HD 触控显示器在 Windows 10 Professional 上的 Chrome 和 Microsoft Edge 中进行了测试。

http://jsfiddle.net/po4a3e1L/2/

我正在尝试使用下一个模式实现类似拖动的功能：

• 订阅标记指针向下事件。
• 当 Down 事件触发时，订阅 Window Pointer Move 和 Up 事件并删除标记。
• 在移动时执行一些操作。
• 当 Up 事件触发时，从 Move 和 Up 取消订阅。

这适用于鼠标事件，但不适用于触摸事件。删除 Touch Start 目标元素后，它们不会触发。我尝试使用Pointer Events Polyfill，但它也不起作用。

我正在使用 Chrome 开发工具来模拟触摸事件。请参阅示例：

我在 IE <=10 中的应用程序遇到问题。

我正在使用这个polyfill 来支持pointer-events: noneIE

但我仍然可以点击我的元素，在其他浏览器中我不能。

我做错了什么？

HTML：

JS：

和plunker：

为什么我还没有禁用指针？

我正在开发一个必须在 IE11 和 Edge 上运行的 JavaScript 应用程序。在 IE11 中，我看到的事件链（从https://patrickhlauke.github.io/touch/tests/results/复制）如下：

pointerover > mouseover > pointerenter > mouseenter > pointerdown > mousedown > (pointermove > mousemove)+ > pointerup > mouseup > (lostpointercapture) > pointerout > mouseout > pointerleave > mouseleave > focus > click

该应用程序已经连接起来以处理鼠标和触摸事件，因此我在所有指针事件上调用 preventDefault() 以取消相应的鼠标事件。不幸的是，点击最终出现并导致问题。是否有任何内置方法可以禁用最后触发的点击事件？