标签: pointer-events

我有一个 div，其指针事件设置为“无”。我可以点击到下面的元素，但是如果我右键单击一个元素并使用 Chrome 检查它，它会给我顶部的 div。还有其他人有这个问题吗？我不记得以前这是一个问题。

以下是事实：

1. 我有一个带圆角的 div，其中包含一个带圆角的 SVG 元素，可创建一个圆。

2. 在圆内（SVG）我正在绘制四个多边形，它们构成了不同的圆象限。

3. 多边形通过改变颜色来响应悬停 - 因此当用户鼠标位于圆圈中的特定象限上方时 - 它会亮起。

4. SVG 和div包含 SVG 的内容都有overflow:hiddenCSS 指令。

5. 当我将鼠标悬停在圆外的区域（但在多边形的剪切矩形内）上时 - 相应的象限会亮起......

为什么即使我将鼠标悬停在剪切区域上，元素也会响应鼠标悬停？我怎样才能确保这种情况不会发生？（不创建遮挡透明元素 - 我希望能够触摸下面图层中的某些东西......）。

编辑： 根据要求添加小提琴：

http://jsfiddle.net/JVQD8/

在小提琴中 - 请注意周围的 div 有一条红线边框。多边形（蓝色）被红色边框（div）剪裁，当您将鼠标悬停在多边形上时，它会变成浅蓝色。如果在多边形上，则多边形会在红色圆圈边框区域之外突出显示。

编辑：

正如 Robert Longson 所说，在 Firefox 中完全没有问题。然而，在 Chrome 中，问题如所描述的那样，并且在 IE 中，SVG 多边形甚至不响应悬停。

因此，有关 chrome 的问题仍然存在 - 仅在 chrome 中。我如何知道这是否是我应该报告的错误，或者这是否是设计的行为差异？

我正在尝试禁用SharePoint 2013列表编辑页面中的超链接.我使用了内容编辑器webpart并将其放入pointer-events : none.它在Google Chrome上运行正常,但在IE中无效.有没有替代方案？我只想要CSS替代品.我的IE是版本10.

我一直在寻找一个跨平台的api，以使用Electron读取Node.JS的多点触控和笔/手写笔输入。我已经测试了Pointer Events Polyfill，它无法检测Windows 10和ArchLinux（i3wm，x11）平板电脑（Thinkpad Yoga）上的压力。Hammer.js缺少笔输入，node-hid没有有效的方法来确定什么是手写笔输入。但是，Wacoms WILL sdk似乎可以满足我的需求，但是我无法想到将其实现到用Electron构建的应用程序中的方法。

有没有人想办法用分类读取xinput数据？

我需要捕获指针事件click和mousemove通过<SVG>宽度/高度定义的内容框之外的形状,通过渲染overflow: visible.

在这个例子中,circle正确渲染,当前的Chrome,FireFox和IE11确实捕获溢出部分上的指针事件,无论是否有例如padding.然而,在Safari 10.0.1 OS X,指针事件没有注册,甚至当我用padding,border和/或margin,不管可能8个排列的哪些.

Safari只会在<SVG>内容块中发出点击:https://jsfiddle.net/monfera/n1qgd5h4/5/

有没有办法监听溢出区域中的指针事件？我还没有检查Safari是否不合规(错误)或其他浏览器是否松懈.

我可以采用制作更大<SVG>元素的解决方法,但它会使盒子模型和CSS的大部分好处无效overflow,导致在JS中手动重做浏览器应该做什么.

现在是 2017 年，我发现在当今的浏览器中处理所有这些不同的输入方法（鼠标、触摸、指针）真的很痛苦。但是，在开发 HTML5/JS 跨浏览器/平台应用程序时，仅仅处理鼠标事件已经不再适用了。由于 AngularJS 是一个非常可靠的、最先进的框架，我希望它在这件事上以某种方式支持我。还是我错了？

Chrome 55+ 现在支持Pointer Event API。对于尚不支持它（或不想支持它，是的，我指的是 Safari）的浏览器，有可用的polyfill。所以这看起来是要走的路。

在我的 Angular 应用程序中，我只想执行以下操作：

<div ng-pointerdown="vm.handlePointerDown()"
     ng-pointerup="vm.handlePointerUp()"
     ng-pointercancel="vm.handlePointerCancel()"
     ng-pointermove="vm.handlePointerMove()"
     ng-pointerover="vm.handlePointerOver()"
     ng-pointerout="vm.handlePointerOut()">
</div>

然后我想忘记所有关于 ng-mouse* 处理程序，而不关心编写自定义的 touchstart、touchend 等处理程序，我必须并行订阅。

Angular 是否有计划为此添加本机支持？或者是否有任何 3rd 方 Angular 库以适当的方式支持这一点？

我知道我可以自己编写所有内容，但对我而言，这似乎非常重要，以至于它应该从框架或围绕它的生态系统中获得所需的关注。

我正在使用 playsinline 属性在页面上显示一个元素，以允许 iOS 设备播放视频而不将其设置为全屏。效果很好，但我注意到，使用该属性，视频元素包含一个带有“媒体控件容器”类的 div 的“阴影内容（用户代理）”元素，这让我认为它与视频控件有关酒吧 o 相似。该 div 通常不会打扰我，但我尝试在视频元素的容器上添加一个点击侦听器，我注意到如果我点击视频元素表面，则不会触发该事件，这在桌面上运行良好浏览器代替。

我已经尝试在视频元素上设置 css 属性“poiter-events:none”，但这似乎还不够，因为我之前提到的“media-controls-container”阻止了事件传播到下层容器。我发现在“media-controls-container”上设置相同的属性可以解决我的问题，但由于它是“Shadow Content (User Agent)”的一部分，我不知道如何使用 css 设置属性.

我还尝试使用 javascript 检查视频元素，我注意到元素上的“video.shadowRoot”属性设置为 null，据我所知，这意味着阴影内容已关闭且无法访问。

所以基本上我无法更改该阴影内容的 css 属性，并且我不知道如何让视频元素将点击事件传播到父容器。

有谁知道如何做到这一点？另请注意，视频元素相对于其容器使用“位置：绝对”定位（我不知道了解它是否有用）。

谢谢您的帮助。

该指针的事件CSS属性设置在什么情况下（如果有的话）一个特定的图形元素可以成为指针事件的目标。我使用此属性来防止在内容更新时与 Web 应用程序的某些部分进行短时间交互。

这会导致通过赛普拉斯运行的端到端测试出现问题。Cypress 被正确阻止与指针事件设置为 none 的元素交互。然而，与其立即失败，我希望 Cypress 等待元素变得难以处理。这是, , 动画等元素的默认行为。disabledreadonly

我的问题是：有什么方法可以让赛普拉斯将此默认行为应用于pointer-events设置为none（或pointer-events设置为none）的元素？

我正在尝试构建一个 React 应用程序，用户触摸一个元素，然后在按住的同时移动到相邻元素。当用户触摸第一个元素时，pointerover 和pointerenter 事件会触发，但当用户将指针移动到相邻元素时，不会触发。我想知道指针何时进入任何元素，无论触摸是否从该元素开始。（如果指针元素是鼠标而不是触摸，则此点和拖动行为确实按我的预期工作。）

尝试各种事件的示例代码笔：https://codepen.io/skedwards88/pen/OJOXwRm如果您使用鼠标，则当您输入元素时，即使单击鼠标然后将其拖入元素，也会触发pointerover和pointerenter事件元素。（这是我想要的行为。）但是，如果您使用触摸，当您按下然后将触摸移动到不同的元素时，不会为第二个元素触发pointerover和pointerenter。

来自 codepen 的代码

JSX

function App() {

  function myF(e, myv) {
    // e.preventDefault()
    console.log(`POINTER ${myv}`)
  }


  return (
    <div className="App">

      <div>
        <div onPointerMove={(e) => myF(e, "a")}>pointer move</div>
        <div onPointerMove={(e) => myF(e, "b")}>pointer move</div>
        <div onPointerOver={(e) => myF(e, "a")}>pointer over</div>
        <div onPointerOver={(e) => myF(e, "b")}>pointer over</div>
        <div onPointerEnter={(e) => myF(e, "a")}>pointer enter</div>
        <div onPointerEnter={(e) => myF(e, "b")}>pointer enter</div>
        <div onPointerMoveCapture={(e) => myF(e, "a")}>pointer move capture</div>
        <div onPointerMoveCapture={(e) => myF(e, "b")}>pointer move capture</div>
      </div> …

我正在尝试使用指针事件来检测包括笔压力在内的数位板输入，但 Chrome 和 Firefox 似乎无法正确读取数位板设备 (Wacom Intuos 4)。所有指针事件都返回与我的鼠标相同的指针 ID 和指针类型，默认压力读数为 0.5。我正在使用的代码如下所示：

container.addEventListener("pointerdown", (event) => {
    console.log(event.pointerId);
    console.log(event.pointerType);
    console.log(event.pressure);
}, true);

这将输出“1”、“鼠标”和“0.5”。这发生在“pointerdown”、“pointermove”和“pointerup”事件中。

我已经在安装了适当驱动程序的 Windows 和 Linux 上尝试过这个，其他应用程序会检测笔压力（例如 Krita）。

Chrome 和 Firefox 是否还不能正确支持图形平板电脑，或者我只是做错了什么？