setPointerCapture 似乎不适用于谷歌浏览器 [英] setPointerCapture does not apprear to be working on google Chrome

问题描述

在尝试制作我正在开发的触摸友好程序时，我从使用鼠标事件切换到使用指针事件.在测试它如何在多个浏览器上使用触摸输入进行操作时，它在 Windows 10 上的 Firefox 和 iOS 上的移动 Safari 上运行良好.但是触摸在 Chrome 上出现了问题.我在使用触摸时将其追溯到 setPointerCapture 方法.我认为这是我的代码有问题，但发现 setPointerCapture 方法在手册页 https://developer.mozilla.org/en-US/docs/Web/API/Element/releasePointerCapture.这里的幻灯片我"页面底部的示例不会在我的触摸屏笔记本电脑(联想 Flex 5)上使用 Chrome 上的触摸滑动，但在 Chrome 中使用鼠标或使用其他浏览器可以正常工作.我的问题是，我需要在 Chrome 中进行设置来解决这个问题吗?是我的笔记本电脑有问题，还是真的是一个错误?

解决方案

您可能需要在元素上将 touch-action 设置为 none 以避免此问题:

 touch-action: none;

<块引用>

touch-action CSS 属性设置触摸屏用户如何操作元素区域(例如，通过浏览器内置的缩放功能).

In trying to make a program I am developing touch friendly, I switched to using pointer events from using mouse events. In testing how it operated using touch input on several browsers, it worked fine on Firefox on Windows 10, and on mobile Safari on iOS. But touch was giving problems on Chrome. I traced it down to the setPointerCapture method when using touch. I thought it was a problem with my code, but found that the setPointerCapture method wasn't working example on the manual page https://developer.mozilla.org/en-US/docs/Web/API/Element/releasePointerCapture either. Here the "SLIDE ME" example at the bottom of the page does not slide using touch on Chrome on my touchscreen laptop (Lenovo Flex 5), but works fine using a mouse in Chrome, or using the other browsers. My question is, is there a setting I need to have in Chrome to fix this, is it a problem with my laptop, or is it really a bug?

解决方案

You probably need to set touch-action to none on the element to avoid this issue:

  touch-action: none;

The touch-action CSS property sets how an element's region can be manipulated by a touchscreen user (for example, by zooming features built into the browser).

这篇关于setPointerCapture 似乎不适用于谷歌浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！