移动端点击事件双触发问题与解决方案

精华修改于05/1497 浏览开发交流疑似 AI 合成内容

一句话总结

在移动端用手指点一下屏幕，游戏却以为你点了两下——因为底层引擎同时发出了"触屏"和"鼠标"两个事件。本文讲清楚为什么会这样，以及怎么优雅地修掉它。

现象

在手机上测试游戏时，点一下按钮，回调函数执行了两次：买一个道具扣了两份钱，关一个弹窗关了两层，开一局游戏开了两把。

在电脑上测试一切正常。

为什么会这样？

根源：SDL 的触屏转鼠标机制

UrhoX 底层使用 SDL 处理输入。SDL 有一个设计：在触屏设备上，每次手指触碰屏幕，SDL 除了发出正常的 Touch 事件外，还会额外模拟一个 Mouse 事件。

这个设计的初衷是好的——让那些只处理了鼠标事件的老程序也能在触屏设备上运行。但对于同时监听了鼠标和触屏的现代 UI 框架来说，就变成了一个坑。

事件流对比

电脑上点一下鼠标：

MouseButtonDown → UI 处理 → onClick 触发 ✅ 只有一次

手机上点一下屏幕：

TouchBegin → UI 处理 → onClick 触发 ✅ 第一次（正常）

MouseButtonDown → UI 处理 → onClick 触发 ❌ 第二次（多余的！）

手指一次触碰，引擎发了两个事件，UI 框架各处理一次，回调就跑了两遍。

为什么 UI 框架不自己处理？

UrhoX 的 UI 库用统一的"指针事件"（PointerEvent）模型来处理输入。Mouse 和 Touch 被视为两个独立的指针源：

- 来源：鼠标，pointerId：0（固定），pointerType："mouse"

- 来源：第一根手指，pointerId：1，pointerType："touch"

- 来源：第二根手指，pointerId：2，pointerType："touch"

框架设计上把它们当作不同的输入设备——就像你可以同时用鼠标和触控板操作电脑一样。框架无法判断"这个 Mouse 事件是真的鼠标还是 SDL 模拟的"，所以两个都会处理。

解决方案

实现方式是在 UI.Init() 之后对 UI 的事件处理函数做一层包装（monkey-patch）。

方案一：时间窗口防抖

时间线：

0ms Touch 到达 → 正常处理，记录时间戳

2ms Mouse 到达 → 距上次 Touch < 100ms → 丢弃 ✅

5000ms Mouse 到达 → 距上次 Touch > 100ms → 正常处理 ✅

具体实现

核心代码

在 UI.Init() 之后，对 UI 的事件处理函数做一层包装（monkey-patch）：

function PatchTouchMouseDedup()

local platform = GetPlatform()

-- 只在可能出现双触发的平台启用

if platform ~= "Android" and platform ~= "iOS" and platform ~= "Web" then

return

end

local DEBOUNCE = 0.100 -- 100ms 窗口期（单位：秒）

local lastTouchTime = -1 -- 初始为负值，不影响启动时的鼠标操作

-- 保存原始函数

local origMouseDown = UI.HandleMouseDown

local origMouseUp = UI.HandleMouseUp

local origMouseMove = UI.HandleMouseMove

local origTouchBegin = UI.HandleTouchBegin

-- 引擎时间（秒），可靠递增

local function now()

return time.elapsedTime

end

-- Touch 到达时记录时间

UI.HandleTouchBegin = function(touchId, x, y, pressure)

lastTouchTime = now()

origTouchBegin(touchId, x, y, pressure)

end

-- Mouse 到达时检查：是不是紧跟在 Touch 后面的模拟事件？

UI.HandleMouseDown = function(x, y, button)

if now() - lastTouchTime < DEBOUNCE then return end -- 丢弃

origMouseDown(x, y, button)

end

UI.HandleMouseUp = function(x, y, button)

if now() - lastTouchTime < DEBOUNCE then return end

origMouseUp(x, y, button)

end

UI.HandleMouseMove = function(x, y)

if now() - lastTouchTime < DEBOUNCE then return end

origMouseMove(x, y)

end

关键细节

1. 为什么用 time.elapsedTime 而不是 os.clock()？

os.clock() 返回的是"CPU 时间"，在嵌入式 Lua 环境（比如 UrhoX）中可能返回 0。如果 os.clock() 返回 0：

lastTouchTime = 0 -- 初始值

os.clock() * 1000 = 0 -- 返回 0

0 - 0 = 0 < 100 -- 永远成立！

所有鼠标事件被永久拦截，游戏直接无法点击。

time.elapsedTime 是引擎提供的"程序启动后经过的秒数"，值可靠且持续递增。

2. 为什么 lastTouchTime 初始值是 -1？

如果初始为 0，在应用启动的头 100ms 内：

now() = 0.05 -- 启动 50ms

0.05 - 0 = 0.05 < 0.1 -- 成立！鼠标被拦截

用户在启动瞬间的点击会丢失。设为 -1 后：

now() = 0.05

0.05 - (-1) = 1.05 > 0.1 -- 不成立，鼠标正常通过 ✅

3. 为什么是 100ms？

SDL 的模拟 Mouse 事件通常在 Touch 事件的同一帧或下一帧到达，间隔不超过 16ms（60fps 下一帧的时间）。100ms 留了足够的余量，同时不会影响真实的快速操作（人类手指两次独立点击的间隔通常 > 200ms）。

方案二：永久标记屏蔽（推荐）

具体实现

在 UI.Init() 之后，对 UI 的事件处理函数做一层包装（monkey-patch）：

function PatchTouchMouseDedup()

local platform = GetPlatform()

if platform ~= "Android" and platform ~= "iOS" and platform ~= "Web" then

return

end

local isTouchDevice = false

local origTouchBegin = UI.HandleTouchBegin

local origMouseDown = UI.HandleMouseDown

local origMouseUp = UI.HandleMouseUp

local origMouseMove = UI.HandleMouseMove

-- 收到第一次 Touch，永久标记为触屏设备

UI.HandleTouchBegin = function(touchId, x, y, pressure)

isTouchDevice = true

origTouchBegin(touchId, x, y, pressure)

end

-- 触屏设备上，Mouse 事件全部是 SDL 模拟的，直接丢弃

UI.HandleMouseDown = function(x, y, button)

if isTouchDevice then return end

origMouseDown(x, y, button)

end

UI.HandleMouseUp = function(x, y, button)

if isTouchDevice then return end

origMouseUp(x, y, button)

end

UI.HandleMouseMove = function(x, y)

if isTouchDevice then return end

origMouseMove(x, y)

end

逻辑更简单，也更可靠：触屏设备上的 Mouse 事件 100% 来自 SDL 模拟，没有例外，不需要猜时序，全部丢弃。

外接鼠标不产生 Touch 事件，isTouchDevice 永远为 false，Mouse 事件照常通过，不受影响。

逻辑变成了：

第一次 TouchBegin → isTouchDevice = true（此后永远生效）

↓

之后所有 MouseDown/Up/Move → isTouchDevice 为 true →全部丢弃

↓

模拟事件无论延迟多久（1ms 还是 500ms）都会被拦截

最终解法

收到 Touch 即标记设备类型，此后永久屏蔽 Mouse

如果你也在用 UrhoX 或其他基于 SDL 的引擎开发移动端游戏，这个 patch 可以直接拿走用。

TapTap 制造应用

9.8

前往论坛