个人中心
gpt4 book ai didi

javascript - 当手指稍微移动时，点击事件不会在触摸屏上触发

转载 作者：行者123 更新时间：2023-11-30 09:11:27 26 4
gpt4 key购买 nike

在计算机上使用鼠标时，单击事件工作正常。即使当我将鼠标按钮放在按钮移动光标上然后在按钮区域内释放鼠标按钮时，单击事件也会触发。但与触摸屏一样，它不起作用。我知道原因是在触摸屏中，这种拖动被认为是滚动。当我没有在按钮上移动太多手指时，将触发 Click 事件。所以只能上下不动。我的客户有问题，他们移动手指太多，很难获得点击事件。是否可以为手指可以移动多少仍然被视为点击而不是滚动设置更大的阈值？

我找到了这篇触摸事件自己处理的文章，翻译成点击事件。 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();
}

这里是按钮和点击处理程序的基本 Angular 示例，如果用户移动手指太多，它就不起作用。我没有检查什么是阈值，但我认为它接近 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');
})

关于javascript - 当手指稍微移动时，点击事件不会在触摸屏上触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58611260/

26 4 0
文章推荐： javascript - 使用对象中的行创建表
文章推荐： java - 无法为 Spring 的 JUnit 测试加载 ApplicationContext
文章推荐： java - 在 Java 中实现缓存以提高读取性能而完全不逐出
文章推荐： javascript - 如何正确使用jquery append
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com