触摸:clientY 属性
Touch.clientY
只读属性返回触摸点相对于浏览器视窗的 Y 坐标,不包括任何滚动偏移。
价值
一个double
浮点值,表示触摸点相对于视窗的 Y 坐标,不包括任何滚动偏移。
例子
此示例演示了如何使用 Touch
对象的 Touch.clientX
和 Touch.clientY
属性。 Touch.clientX
属性是触摸点相对于浏览器视窗的水平坐标,不包括任何滚动偏移。 Touch.clientY
属性是触摸点相对于浏览器视窗的垂直坐标,不包括任何滚动偏移。
在此示例中,我们假设用户在 id 为source
的元素上开始触摸,在元素内或元素外移动,然后释放对表面的接触。 当 touchend
事件处理程序被调用时,将计算从开始触摸点到结束触摸点的 Touch.clientX
和 Touch.clientY
坐标的变化。
js
// Register touchstart and touchend listeners for element 'source'
const src = document.getElementById("source");
let clientX;
let clientY;
src.addEventListener(
"touchstart",
(e) => {
// Cache the client X/Y coordinates
clientX = e.touches[0].clientX;
clientY = e.touches[0].clientY;
},
false,
);
src.addEventListener(
"touchend",
(e) => {
let deltaX;
let deltaY;
// Compute the change in X and Y coordinates.
// The first touch point in the changedTouches
// list is the touch point that was just removed from the surface.
deltaX = e.changedTouches[0].clientX - clientX;
deltaY = e.changedTouches[0].clientY - clientY;
// Process the data…
},
false,
);
规范
规范 |
---|
触摸事件 # dom-touch-clienty |
浏览器兼容性
BCD 表格仅在浏览器中加载