移动端缩放操作会触发点击事件问题

原创已于 2023-07-27 10:10:07 修改 · 217 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5

于 2021-08-18 17:55:27 首次发布

移动端同时被 2 个专栏收录

2 篇文章

订阅专栏

konva

1 篇文章

订阅专栏

本文探讨了在移动端开发中如何通过Konva库有效处理缩放事件，避免因缩放操作误触发点击事件。通过设置`ismove`标志，精确区分触摸开始、移动和结束的行为，确保点击事件仅在停止缩放时执行。

移动端缩放操作会触发点击事件问题

缩放和点击事件做个区分，代码如下：

// 我这边用的是Konva的‘on’监听事件， 事件的监听方式 根据环境调整
tap(group: Konva.Group) {
        let ismove = false;
        group.on('touchstart', (e) => {
            ismove = false;
        });
        group.on('touchmove', (e) => {
            ismove = true;
        });
        group.on('touchend', (e) => {
            if (ismove) {
                return;
            }
            // 执行移动端点击事件触发的函数
            this.handleClick();
        });
    }```