问题标签 [pointer-events]

我不想使用属性选择器禁用主页中的链接，pointer-events: disable;但我想保持 :hover 效果。

这是CSS：

这个网站：www.rafagarces.com/work

谢谢！

例如，在 Chromium 58.0.3029.81 中，如果您通过拖动文本选择来弄乱它一段时间（可能需要一分钟），以下内容将停止在可选择和不可选择状态之间闪烁。之后它似乎总是保持pointer-events: none状态直到重新加载，即使选项卡被切换。

https://codepen.io/anon/pen/ZKeaRm

例如，在 Firefox 中似乎没有发生这样的超时。

我的问题是这是故意的还是无声的错误。

我目前正在使用此代码用 Microsoft Surface 上的笔在画布上绘图（当然是在表面上）：

到目前为止一切顺利，工作正常。

我现在打算做的是，画布会对我的表面笔上的压力做出反应。

我知道它PointerEvent有一个属性pressure，我知道对于画布，有lineWidth. 但是我怎样才能把它们结合起来呢？所以当我只施加一点压力时，我会得到一条细线，而压力越大，线就越粗？

谢谢

编辑：刚刚意识到，代码中似乎存在问题，即使用笔绘图，它似乎也跳转到 else 情况（所以使用鼠标的后备），试图console.log在 if 部分添加 a，而且它没有打印出来……这是为什么呢？

我是 Web 开发和 svg 相关主题的初学者。

我认为这对你的 svg 专家来说应该很容易，但我现在为此苦苦挣扎了一段时间。我在这个主题上找到的所有资源似乎都不适用于我相当简单的目标。

我的应用程序应该在 Chrome 浏览器中运行。

DOM 结构如下：

虽然里面可能有更多的 svg 标签或嵌套的 svg 元素，但这是一般设置。

目标：

我想单击某处并找到位于我单击位置的 svg 子元素（例如圆圈）。我想到的基本功能是：

问题：

1）所有元素都可以进行转换，例如应用于它们的平移、缩放和旋转，这使事情变得复杂。

2）我只希望能够单击元素，它们是 svg 节点的子节点。

我的一些尝试：

https://jsfiddle.net/a6uLn9cn/3/

我试图将“pointer-events:none”放在 DIV 和/或 SVG 节点上。这样，我就可以避免这些是“可点击的”。但是这里有两个问题：我需要 SVG 节点上的指针事件，因为它需要被缩放和平移，以及例如圆圈上的点击事件以某种方式“冒泡”到 DIV。

另一种确保 svg 节点的子节点是“可点击”的方法是检查 element.ownerSVGDocument 中找到的元素。如果它为 null 或未定义，我知道找到的元素不是 svg 子元素。

为了解决实际单击已转换的元素（通过其自身或通过其父元素）的问题，我尝试使用 element.getBoundingClientRect() ，它为我提供了元素的周围矩形。有了这个，我做了一个函数来确定点击是否在矩形周围的元素内：

e 是点击事件，elem 是 document.elementFromPoint() 收到的找到的元素

但是在我的 jsfiddle 中，您将无法“单击”例如其 boundingClientRect 最右侧的路径，如果您想象 boundingClientRect 在哪里，这对我来说毫无意义。

此外，如果我在添加圆圈后将路径添加到 DOM，我将无法再单击圆圈，而只能单击路径。我完全明白为什么，但如果我需要同时点击两者怎么办？

我不确定我是否能够在这里解决我的麻烦，但我会非常感谢你们可能给我的任何意见。非常感谢。

tldr; 我需要一个元素来注册拖放指针事件，但将单击和其他指针事件传递给它后面的元素。

我正在使用react-dropzone. 我希望dropzone它覆盖整个页面，因此如果您将文件拖到页面的任何部分，您可以将其拖放以上传图像。当dropzone没有文件被拖到它上面时它是透明的，所以我需要点击来注册它后面的元素。

为此，我为 dropzone 组件赋予了以下样式：

但是，pointer-events: none;会导致dropzone无法识别必要的拖放事件。有没有办法识别这些特定的指针事件，同时将其他事件（如点击）传递给dropzone?

有没有办法设置pointerEvents在nonea 上Modal？我正在尝试在其父母范围之外渲染一个子视图，我能做到这一点的唯一方法是使用Modal. 忽视pointerEvents孩子似乎没有用。

我已经构建了一个 javascript 库，它将指针事件侦听器附加到 DOM 元素（此处）。今天，我在 Polymer 1.9 Web 组件中使用它来包装它，使用PEP在 Firefox 上填充指针事件，它工作正常：

我只是elementDomElement.addEventListener('pointerdown', (e) => { // Some code });在注册下做，没什么特别的。

迁移到 Polymer 2 后，我有类似的东西：

在 Chrome 和 Edge 下可以正确处理指针事件，但在 Firefox 中，事件会卡在 shadowRoot 上。如果我正在听this，例如 shadowRoot，我可以处理它们，但不能在editorDomElement.

我做错了什么还是 Firefox 上的 Polymer 2 事件转发有问题？是否有解决方案或解决方法使其工作？谢谢

我有一个将指针事件设置为无的元素，因此不会显示子元素的悬停样式。

但是，当单击此元素时，我想用 JavaScript 做一些事情。在 JavaScript 中使用 onclick 事件似乎不起作用，因为 pointer-events 设置为 none。

有没有办法解决这个问题，这样我就可以拥有一个没有指针事件的元素仍然可以触发 JavaScript 事件？

JavaScript：

干杯

下面我有一张图片，后面是文字。如何防止它周围的区域被突出显示？图像本身不可选择（使用

) 但图像的周围区域是。我尝试为图像添加左右边距以及使图像成为自己的 div 并将上述代码应用于 div，但它不起作用。（我将高光设为绿色）

编辑：这是链接在这里的另一个示例https://jsfiddle.net/nnzf4h5c/

我有一个带有按钮的地图，我可以点击这些按钮，但想在顶部添加一个图形图层。问题是（即使我正在阅读的所有内容都说它不应该这样做），当单击具有像素的 topLayer png 的任何部分时，它不允许我单击下面的按钮。我基本上想让topLayer 不可点击，我已经尝试了各种名称的pointerEvents 的各种变体......我唯一能够使用drawImage 操作的是globalAlpha。

我到底如何防止这种情况掩盖我的点击？