问题标签 [pointer-events]

I have two divs, I've placed one in front of the other using z-index. Unfortunately they must be arranged this way, changing the arrangement of the divs is not an option. The problem is that I have buttons in BOTH divs that need to be clickable. I cannot set the first div to "pointer-events:none" because that makes the top div's buttons unclickable. Is there anything I can do so that both the top div and the elements underneath are clickable?

我有一个使用 iFrame 加载动态标题的网页（长话短说，我们有一个包含 Shopify 页面的大网站；该网站上的每个其他页面都使用 Ektron 小部件来加载标题，但我做不到在 Shopify 代码中，所以我使用 iFrame 从单独的页面加载标题）。标题有需要工作的按钮，以及单击登录按钮时打开的模式窗口。模态窗口是问题所在。我的 iFrame 目前是标题本身的大小（330px）；如果 iFrame 窗口大于该窗口，它会覆盖页面下方的内容并使这些按钮无法点击。我无法将“pointer-events:none”添加到 iFrame，因为我需要 iFrame 标头中的按钮才能工作。但是，当登录模式打开时，它会被截断，因为 iFrame 不够大，无法显示整个内容。我也不能将 iFrame 高度设置为 1000px 并使用 z-index 将其放在其他内容的后面，因为当我这样做时，Shopify 页面上的内容会显示在模式窗口的顶部。

我尝试的最后一件事是动态更改 iFrame 的高度，以便在单击登录按钮时，iFrame 的高度会增加以显示整个模式。但是，由于 iFrame 内容与 Shopify 页面的域不同，因此我无法将 iFrame 定位为标题文档的父级。

我真正想做的是使 iFrame 的高度足够大以显示模态窗口，而且还要使 iFrame 后面的按钮可点击，而不禁用 iFrame 中的按钮。有什么办法可以在 div 中和后面都启用按钮吗？

我使用画布来绘制可以拖动的对象。如果用户触摸一个没有对象的区域，他可以滚动页面。我有一个有效的触摸事件实现，并且无法添加 PointerEvents API 支持。

我使用触摸事件 APIevent.preventDefault()来防止滚动。

现在使用 PointerEvents API 它不起作用 - 我得到pointerDown事件但没有移动事件和自动页面滚动启动。

到目前为止，我发现您可以使用touch-actionCSS 属性在页面滚动和触摸动作之间切换，但不是基于每次触摸的方法。

例如，用户可以用一根手指滚动页面，同时用第二根手指移动对象。

我有2个div。它们没有重叠，但其中一个的 z-index 高于另一个。我正在尝试将 a div li:hover{ } 应用于较低的，但它不起作用。

我试过pointer-events: none了，但我onClick在更高 div 中的所有事件都不起作用。

无论如何要解决这个问题？

谢谢！

在 Surface 平板电脑上处理触摸/指针事件的最佳方式是什么？我发现它的行为相当混乱。我编写了一个脚本，它只设置所有事件处理程序来确定事件是如何被触发的（设置本机事件处理程序，使用 jQuery 作为 UI）：

使用鼠标垫或桌面IE11，一切都很好。所有三个事件（鼠标、指针、MSPointer）都按预期的顺序触发：向下、移动、向上。

但是，当我使用触摸屏时

• 起初，pointermove 触发，然后指针向下。在屏幕上，我的手指周围出现了一个矩形。
• 重复的移动事件在不移动我的手指时触发
• 当我移动手指时不再触发任何事件
• 移除手指时的pointerend事件

我究竟做错了什么？调用 preventDefault、stopPropagation 或 stopImmediatePropagation 不会更改此行为。设置 css指针事件：无；禁用所有事件。

在 codepen 上完成脚本

小提琴

我有一个包裹在一个锚点中的图像，该锚点上有一个点击动作（一个简单的案例在上面的小提琴中）。

在某些时候，这个动作是无效的，所以我想做三件事：

1. 使图像变灰 ( -webkit-filter: invert(40%);)
2. 禁用点击事件 ( pointer-events: none;)
3. 更改光标 ( cursor: not-allowed;)

将图像变灰总是有效的，但似乎指针事件和光标属性不能很好地结合在一起。

当同时应用指针事件和光标属性时，我希望该操作被禁用并且光标会改变 - 但似乎指针事件属性覆盖了我设置光标的能力。

这样做的正确方法是什么？

代码：

我正在尝试覆盖包含 div 的指针事件属性。到目前为止，它适用于除 IE 11 之外的所有内容。据说，指针事件属性已添加到 IE 11。由于某种原因，它不会覆盖。

整个 div 不允许指针事件，包括按钮。我认为由于 div 根本没有事件，IE 支持属性指针事件，但是当我明确设置孩子有事件时，由于某种原因它不会允许它。谢谢您的帮助！

我正在尝试制作一个没有链接的按钮，因为背景已经链接。因此，您应该能够通过它。我知道pointer-events:none但是使用它时，div 的:hover将不再起作用。

有什么办法可以做到这一点？

我的 HTML 是：

CSS：

“按钮”类应该有一个：悬停效果+点击。此设置不会显示 :hover 效果。

目前，我正在尝试为应该可以在一定范围内拖动的 HTML 元素实现触摸支持。它可以在使用 touchmove 的 Android 和 iOS 平板电脑上运行，但还不能在 Windows 平板电脑上的 IE 10 上运行。我设法捕获了 MSPointerMove 事件，我认为它应该具有 pageX 和 pageY 属性，但是当我console.log得到这些时，我得到了undefined. 使用手势事件不是一种选择，因为我需要知道它在轴上拖了多远。

那么，我应该寻找哪些属性？

I have implemented pointer events for canvas object. I need to know how we can detect finger count for touch events. Here is a piece of my code:

Appreciate your help.