Jan*_*rju 4 javascript touchscreen onclick angular
在计算机上使用鼠标时，单击事件工作正常。即使当我将鼠标按钮放在按钮移动光标上，然后在按钮区域内释放鼠标按钮时，单击事件也会触发。但与触摸屏相同，它不起作用。我知道原因是在触摸屏中这种拖动被视为滚动。当我不在按钮上移动太多手指时，会触发单击事件。所以只能上下不动。我的客户有一个问题，他们移动手指太多，很难获得点击事件。是否可以为手指可以移动的距离设置更大的阈值，但仍将其视为单击而不是滚动？
我发现这篇文章中触摸事件是自行处理的，并将其翻译为点击事件。http://phonegap-tips.com/articles/fast-touch-event-handling-eliminate-click-delay.html我不想走这条路。
你有什么建议我该如何解决这个问题吗？
以下是有关触摸事件的更多详细信息https://developer.mozilla.org/en-US/docs/Web/API/Touch_events查看处理点击，其中描述了点击在触摸屏中的工作方式。但我还是没有成功工作。几个月前，我对evt.preventDefault();touchmove 事件处理程序进行了处理，它确实解决了问题，但目前看来还没有。
编辑：2019.11.5
以下是之前可以工作但现在不再工作的内容：
html
<body (touchmove)="touchMoveEvent($event)"></body>
TypeScript
touchMoveEvent(ev: Event): void
{
ev.preventDefault();
}
这是按钮和单击处理程序的基本角度示例，如果用户移动手指太多，则该处理程序将不起作用。我还没有检查阈值是多少，但我认为阈值接近 10px-20px。
<button (click)="onClickEventHandler($event)">Press button</button>
onClickEventHandler(ev: Event) {
//do the thing here
}
我已经使用 chrome 的 devtools 切换设备工具栏测试了触摸屏功能。
这是一个很好的解决方案。通过使用touchstart和touchend事件，您可以测量两点之间的距离，如果事件接近（以像素为单位），则触发单击事件。阅读我的评论。
class ScrollToClick {
constructor(elem, maxDistance = 20) {
this.elem = elem;
this.start = null;
this.maxDistance = maxDistance;
// Bind the touches event to the element
this.bindTouchEvents();
}
bindTouchEvents() {
this.elem.addEventListener('touchstart', this.onTouchStart.bind(this), false);
this.elem.addEventListener('touchend', this.onTouchEnd.bind(this), false);
}
onTouchStart(e) {
// hold the touch start position
this.start = e.touches[0];
// clear the position after 2000 mil (could be set for less).
setTimeout(() => { this.start = null; }, 2000);
}
onTouchEnd(e) {
// if the timeout was called, there will be no start position
if (!this.start) { return; }
// calculate the distance between start and end position
const end = e.changedTouches[0],
dx = Math.pow(this.start.pageX - end.pageX, 2),
dy = Math.pow(this.start.pageY - end.pageY, 2),
distance = Math.round(Math.sqrt(dx + dy));
// if the distance is fairly small, fire
// a click event. (default is 20 but you can override it through the constructor)
if (distance <= this.maxDistance) {
this.elem.click();
}
// clear the start position again
this.start = null;
}
}
然后你可以将它与任何元素一起使用，如下所示：
// use any element you wish (here I'm using the body)
const elem = document.body;
// initialize the class with the given element
new ScrollToClick(elem);
// listen to a click event on this element.
elem.addEventListener('click', (e) => {
console.log('Clicked');
})
| 归档时间： |
|
| 查看次数： |
8148 次 |
| 最近记录： |