标签: pointer-events

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

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

该应用程序已经连线处理鼠标和触摸事件,所以我在所有指针事件上调用preventDefault()来取消相应的鼠标事件.不幸的是,点击在结束时出现并导致问题.有没有内置的方法来禁止点击事件在最后解雇？

可以有一个带有指针事件的外部 div: none; 和另一个带有指针事件的 div：auto;。外部 div 对点击事件是透明的（即它不会对点击事件做出反应，但底层 html 控件会），而内部 div 会。

但是，我现在有一个场景，我需要用 iframe 做同样的事情，但它不起作用。我设置了指针事件：无；在 iframe 上，但是即使它们有指针事件，应该可点击的内部 div 也不是： auto; 放。

这里还有另一个类似的问题，但由于偏离主题而被关闭。我不明白为什么。这是一个非常有效的 html/css 问题。

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

小提琴

<svg>
    <rect id="red"    x=10 y=10 width=60 height=60 style="fill:#ff0000" />
    <rect id="orange" x=80 y=10 width=60 height=60 style="fill:#ffcc00" />
    <rect id="blue"   x=50 y=30 width=60 height=60 style="fill:#0000ff; fill-opacity: 0.8" />
</svg>

$('rect').on('mousemove', function()
{
    log(this.id);
});

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

这与指针事件有关,因为我可以通过将蓝色元素的指针事件设置为无,在悬停蓝色元素时获取红色和橙色元素来触发事件.但后来我没有得到蓝盒的事件,所以这也不是一个可行的选择.

我将使用哪个库解决这个问题.我在这个d3示例中查看了事件冒泡,但这仅适用于嵌套在DOM中的元素.我有很多可能与许多其他元素重叠的独立元素,因此无法以这种方式构建我的DOM.

我猜最后的办法是找到当前鼠标位置的元素,并手动触发事件.因此,我查看了document.elementFromPoint(),但这只会产生1个元素(并且在SVG中可能不起作用？).我发现jQuerypp功能中,即发现在给定位置的元素,见这里.这个例子看起来很棒,除了它是DIV而不是SVG内部.当用svg矩形元素替换div时,小提琴似乎破了.

我该怎么办？!

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

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

这适用于鼠标事件,但不适用于Touch事件.删除Touch Start目标元素后,它们不会触发.我尝试使用指针事件Polyfill,但它也不起作用.

我正在使用Chrome Dev Tools来模拟触摸事件.看样品:

initTestBlock('mouse', {
  start: 'mousedown',
  move: 'mousemove',
  end: 'mouseup'
});
initTestBlock('touch', {
  start: 'touchstart',
  move: 'touchmove',
  end: 'touchend'
});
initTestBlock('touch-no-remove', {
  start: 'touchstart',
  move: 'touchmove',
  end: 'touchend'
}, true);

function initTestBlock(id, events, noRemove) {
  var block = document.getElementById(id);
  var parent = block.querySelector('.parent');
  var target = block.querySelector('.target');
  target.addEventListener(events.start, function(e) {
    console.log(e.type);
    if (!noRemove) {
      setTimeout(function() {
        // Remove target
        target.parentElement.removeChild(target);
      }, 1000);
    }

    function onMove(e) {
      console.log(e.type);
      var …

是否可以允许点击但不能滚动事件？

pointer-events: none;

将禁用这两种类型的输入,我想只禁用滚动.还有其他解决方法吗？

我正在构建一个应该与鼠标或触摸一起使用的界面。由于各种身体问题，我的用户可能难以达到他们想要的目标。

指针事件似乎对此很完美，但我得到了不同的行为。

我想知道指针何时进入和离开目标，以及何时按下。使用鼠标，如果我在目标 T1 上按下鼠标按钮并移动（同时按住按钮）到目标 T2，我会得到指针悬停 T1、指针向下 T1、指针悬停 T1、指针悬停 T2、指针悬停 T2。正是我所期望的。

通过触摸屏，我得到：指针悬停 T1、指针悬停 T1、指针悬停 T1。没有任何迹象表明我从一个目标转移到另一个目标。

如何使触摸行为更像鼠标？

这是在 Linux Ubuntu 上的 Chrome 99 上。

我试图使用指针事件（例如pointerdown）而不是组合触摸（例如touchstart）和鼠标（例如mousedown）事件来计算输入事件坐标。

var bodyElement = document.body;

bodyElement.addEventListener("touchstart", function(e) {console.log("touch: " + e.changedTouches[0].clientX + " " + e.changedTouches[0].clientY);});
bodyElement.addEventListener("pointerdown", function(e) {console.log("point: " + e.clientX + " " + e.clientY);});

一切正常，直到视口被缩放（例如，android chrome 缩放网页，chrome 开发工具中的设备工具栏缩放系数不是 100%，...）。然后指针事件开始报告完全错误的值。

您可以在以下屏幕截图中观察错误：

1) 视口缩放到 100%，300px*300px div 点击到右下角：

2) 视口缩放到 150%，300px*300px div 点击右下角：

你们知道如何从指针事件中获得正确的坐标吗？

编辑：
添加了jsfiddle：jsfiddle

我有一个允许在画布上绘图的库。目前，它支持鼠标和触摸事件。我还想添加对指针事件的支持。

我正在处理pointerdown,pointermove和pointerup画布元素上的事件。当我使用鼠标时，我的笔记本电脑上的 Chrome 一切正常。但是，当我在平板电脑上尝试时，我只收到几个pointermove事件（2-5），然后才收到pointercancel事件，然后是pointerout和pointerleave。

我猜浏览器正在触发pointercancel，因为在画布上移动手指也会触发整个页面的滚动。

要在使用触摸事件时禁用滚动，我正在调用event.preventDefault()和touchstart事件的处理touchmove程序，但此解决方案似乎不适用于指针事件。

使用指针事件在画布元素上绘制时如何禁用整个页面的滚动？

我有包含 div 元素的组件。我希望能够根据该 div 元素的边框颜色禁用/启用对该 div 元素的单击。

想法是有一个方法，该方法将返回应在 div 上绘制的边框颜色，然后如果颜色为“绿色”，则将该 div 的 pointerEvent 设置为“auto”，如果它不是“绿色”，则将 pointerEvent 设置为“none”。然而，当我尝试这样做时，我遇到了奇怪的语法错误，我无法弄清楚为什么会发生这种情况，我认为代码没问题，但 Typescript 中的其他一些配置可能是错误的。我得到的错误如下所示

[ts] 类型 '{pointerEvents: string; 显示：字符串；边框：字符串；高度：字符串；宽度：字符串；左边缘：字符串；}' 不可分配给类型“CSSProperties”。属性“pointerEvents”的类型不兼容。类型“string”不可分配给类型“PointerEventsProperty”。[2322服]第2322服[双线] 新服

我尝试将属性设置为一个值“none”或“auto”，效果很好，但是当我放入条件语句时，它不起作用。我尝试将样式设置为 CSSProperties 类型，但随后出现如下错误：

[ts] 类型“string”不可分配给类型“”-moz-initial”| “继承”| “初始”| “恢复”| “取消设置”| “全部” | “自动”| “填充”| “无” | “画”| “中风”| “可见”| “可见填充” | “可见画”| “可见中风”| 可观察<...>'。[2322服]第2322服[双线] 新服

风格定义：

            const divContainerDetailsStyle ={
                pointerEvents: `${this.whatColorToDraw('container') == 'green' ? 'auto' as PointerEventsProperty : 'none' as PointerEventsProperty }`,
                display: 'inline-block',
                border: `${this.whatColorToDraw('container') == 'green' ? '5px' : '1px'} solid ${this.whatColorToDraw('container')}`,
                height: '20%', …

MDN说：

Element 接口的 setPointerCapture() 方法用于指定特定元素作为未来指针事件的捕获目标。指针的后续事件将针对捕获元素，直到捕获被释放。

如果我调用回调：示例，它会按预期工作setPointerCapture-pointerDown在这里您可以按照您想要的速度拖动黄色方块，它将跟随光标直到pointerUp事件发生。

但是，如果尝试在回调中捕获目标，pointerMove它将无法按我的预期工作：示例- 黄色方块跟随光标，直到光标悬停在方块上。如果你移动鼠标太快，方块就会停止。

如何解释这种行为？我是否误解了文档？