antvis/G6

移动端,触摸屏模式下,node:click事件不生效 #5652

SmartGreenOrange posted onGitHub

问题描述

移动端,触摸屏模式下,node:click事件不生效,只生效node:touchxxx事件

重现链接

任意图谱,切换成触摸模式即可触发

重现步骤

chrome调试中选择移动端设备,例如iphoneSE,在绑定了node:click事件的节点点击,在on('click',()=>{})事件中没有触发

预期行为

期望click事件能原生支持移动端 现在只能采取挺后门的做法:添加了自定义Behaviour,监听touchstart和touchend,通过计算start到end的时间和位移的距离来判断用户是否是点击操作

平台

  • 操作系统: [Windows]
  • 网页浏览器: [Google Chrome]
  • G6 版本: [4.8.20]

屏幕截图或视频(可选)

No response

补充说明(可选)

const registerTouchClick = graph => { G6.registerBehavior('touch-to-click', { getDefaultCfg() { return { startTime: 0, startX: 0, startY: 0 }; }, getEvents() { return { 'node:touchstart': 'onTouchStart', 'node:touchend': 'onTouchEnd' }; }, onTouchStart(e) { const { canvasX, canvasY } = e; this.startX = canvasX; this.startY = canvasY; this.startTime = new Date().getTime(); }, onTouchEnd(e) { const { canvasX, canvasY } = e; const timeDiff = new Date().getTime() - this.startTime; const distance = Math.sqrt(Math.pow(canvasX - this.startX, 2) + Math.pow(canvasY - this.startY, 2)); if (timeDiff < 500 && distance < 10) { graph.emit('touch-click', e); } } }); graph.addBehaviors('touch-to-click', 'default'); };


<!-- Greeting -->

Hey there, @SmartGreenOrange! 🍊

I'm Dosu, a chatbot here to lend a hand with bugs, answer your questions, and guide you through contributing while we wait for a human maintainer. I'm all about making your experience smooth and a bit more fun around here.

I've seen your issue regarding the node:click event on touch screens, and I'm rolling up my virtual sleeves to dive into it. Expect a detailed response shortly!

posted by dosubot[bot] about 1 year ago

4.x 后续仅对严重 Bug 进行修复,不会额外加入新特性。移动端相关交互后续会在 G6 5.0 中进行适配

posted by Aarebecca 11 months ago

4.x 后续仅对严重 Bug 进行修复,不会额外加入新特性。移动端相关交互后续会在 G6 5.0 中进行适配

请问现在适配了吗

posted by zerlynn 8 months ago

Fund this Issue

$0.00
Funded

Pull requests