martial/martial-admin-mini
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: iOS Safari 双击缩放问题 - UniApp H5 专用解决方案

Browse Source 
问题描述：
- 用户在 iOS Safari 上快速点击加分/减分按钮时触发页面缩放
- 影响用户体验，导致操作困难

解决方案：
1. 全局事件拦截（index.html）
   - 拦截 touchstart/touchend 事件，检测快速连续触摸（<350ms）
   - 完全禁用 dblclick 和 gesture 事件
   - 使用 MutationObserver 动态监听 DOM 变化
   - 添加 CSS 强制禁用缩放

2. 组件级优化（modify-score.vue）
   - 使用 touchstart/touchend 替代 click 事件
   - 添加 300ms 防抖机制，忽略快速连续触摸
   - 实现长按连续加减分功能（500ms 后每 100ms 触发一次）
   - H5 平台条件编译，添加原生事件监听器
   - 清理定时器，防止内存泄漏

3. UniApp 特性应用
   - 使用条件编译 #ifdef H5 针对 H5 平台特殊处理
   - 利用 $nextTick 确保 DOM 渲染完成后添加事件监听
   - 保持跨平台兼容性（小程序、App 不受影响）

技术要点：
- touch-action: none 禁用触摸动作
- event.preventDefault() 阻止默认行为
- capture: true 在捕获阶段拦截事件
- passive: false 允许调用 preventDefault()

测试建议：
- 在 iOS Safari 上快速点击按钮，验证不再缩放
- 测试长按功能是否正常工作
- 验证其他平台（微信小程序、Android）不受影响

🤖 Generated with Claude Code

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
DevOps
2025-12-24 01:24:36 +08:00
parent 56c1320e40
commit 5349b80cf8
2 changed files with 296 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
index.html
View File

@@ -3,6 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 关键：使用最严格的 viewport 设置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
@@ -11,6 +12,7 @@
<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" /> <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
<style> <style>
* { * {
/* 允许垂直滚动，但禁用其他触摸动作 */
touch-action: pan-y !important; touch-action: pan-y !important;
-webkit-touch-callout: none !important; -webkit-touch-callout: none !important;
-webkit-tap-highlight-color: transparent !important; -webkit-tap-highlight-color: transparent !important;
@@ -18,12 +20,18 @@
user-select: none !important; user-select: none !important;
} }
/* 针对按钮元素完全禁用触摸动作 */ /* 针对按钮元素完全禁用所有触摸动作 */
button, .control-btn, [class*="btn"], [class*="control"] { button,
.control-btn,
[class*="btn"],
[class*="control"],
.decrease,
.increase {
touch-action: none !important; touch-action: none !important;
-webkit-user-select: none !important; -webkit-user-select: none !important;
user-select: none !important; user-select: none !important;
-webkit-touch-callout: none !important; -webkit-touch-callout: none !important;
pointer-events: auto !important;
} }
/* 允许输入框正常交互 */ /* 允许输入框正常交互 */
@@ -32,68 +40,86 @@
-webkit-user-select: text !important; -webkit-user-select: text !important;
user-select: text !important; user-select: text !important;
} }
/* 防止页面整体缩放 */
html, body {
touch-action: pan-y !important;
-ms-touch-action: pan-y !important;
}
</style> </style>
<script> <script>
// 终极 iOS Safari 双击缩放禁用方案 // UniApp H5 专用：iOS Safari 双击缩放终极解决方案
(function() { (function() {
'use strict'; 'use strict';
var lastTouchEnd = 0; var lastTouchEnd = 0;
var lastTouchStart = 0; var touchStartTime = 0;
var touchCount = 0; var touchCount = 0;
var resetTimer = null; var resetTimer = null;
var isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
// 方案1: 拦截所有快速连续的触摸事件 console.log('iOS 检测:', isIOS);
console.log('User Agent:', navigator.userAgent);
// 方案1: 全局拦截 touchstart - 最高优先级
document.addEventListener('touchstart', function(event) { document.addEventListener('touchstart', function(event) {
var now = Date.now(); var now = Date.now();
touchStartTime = now;
// 重置计数器 // 清除重置计时器
if (resetTimer) { if (resetTimer) {
clearTimeout(resetTimer); clearTimeout(resetTimer);
} }
// 如果距离上次触摸结束小于300ms，增加计数 // 检查是否是快速连续触摸
if (now - lastTouchEnd < 300) { var timeSinceLastTouch = now - lastTouchEnd;
if (timeSinceLastTouch < 350) {
touchCount++; touchCount++;
// 如果是第二次或更多次快速触摸，阻止默认行为 // 如果是第二次或更多次快速触摸，立即阻止
if (touchCount >= 1) { if (touchCount >= 1) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
event.stopImmediatePropagation(); event.stopImmediatePropagation();
console.log('阻止快速连续触摸', touchCount, timeSinceLastTouch);
return false;
} }
} else { } else {
touchCount = 0; touchCount = 0;
} }
lastTouchStart = now; // 600ms 后重置计数器
// 500ms后重置计数器
resetTimer = setTimeout(function() { resetTimer = setTimeout(function() {
touchCount = 0; touchCount = 0;
}, 500); }, 600);
}, { passive: false, capture: true }); }, { passive: false, capture: true });
// 方案2: 拦截touchend事件 // 方案2: 全局拦截 touchend
document.addEventListener('touchend', function(event) { document.addEventListener('touchend', function(event) {
var now = Date.now(); var now = Date.now();
var touchDuration = now - touchStartTime;
var timeSinceLastTouch = now - lastTouchEnd; var timeSinceLastTouch = now - lastTouchEnd;
// 如果两次触摸间隔小于300ms，阻止默认行为 // 如果触摸时间很短(<150ms)且距离上次触摸很近(<350ms)，很可能是双击
if (timeSinceLastTouch <= 300 && timeSinceLastTouch > 0) { if (touchDuration < 150 && timeSinceLastTouch < 350 && timeSinceLastTouch > 0) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
event.stopImmediatePropagation(); event.stopImmediatePropagation();
console.log('阻止疑似双击', touchDuration, timeSinceLastTouch);
return false;
} }
lastTouchEnd = now; lastTouchEnd = now;
}, { passive: false, capture: true }); }, { passive: false, capture: true });
// 方案3: 完全禁用双击事件 // 方案3: 完全禁用 dblclick 事件
document.addEventListener('dblclick', function(event) { document.addEventListener('dblclick', function(event) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
event.stopImmediatePropagation(); event.stopImmediatePropagation();
console.log('阻止 dblclick 事件');
return false; return false;
}, { passive: false, capture: true }); }, { passive: false, capture: true });
@@ -101,6 +127,7 @@
document.addEventListener('gesturestart', function(event) { document.addEventListener('gesturestart', function(event) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
console.log('阻止 gesturestart');
}, { passive: false, capture: true }); }, { passive: false, capture: true });
document.addEventListener('gesturechange', function(event) { document.addEventListener('gesturechange', function(event) {
@@ -113,50 +140,92 @@
event.stopPropagation(); event.stopPropagation();
}, { passive: false, capture: true }); }, { passive: false, capture: true });
// 方案5: 使用 Pointer Events 拦截 // 方案5: 监听 click 事件，过滤快速连续点击
if (window.PointerEvent) {
var lastPointerUp = 0;
document.addEventListener('pointerup', function(event) {
var now = Date.now();
if (now - lastPointerUp < 300) {
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
}
lastPointerUp = now;
}, { passive: false, capture: true });
}
// 方案6: 监听 click 事件，过滤掉快速连续的点击
var lastClickTime = 0; var lastClickTime = 0;
document.addEventListener('click', function(event) { document.addEventListener('click', function(event) {
var now = Date.now(); var now = Date.now();
var timeSinceLastClick = now - lastClickTime; var timeSinceLastClick = now - lastClickTime;
// 如果距离上次点击小于300ms，可能是双击导致的，阻止 // 如果距离上次点击小于350ms，阻止
if (timeSinceLastClick < 300 && timeSinceLastClick > 0) { if (timeSinceLastClick < 350 && timeSinceLastClick > 0) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
event.stopImmediatePropagation(); event.stopImmediatePropagation();
console.log('阻止快速连续点击', timeSinceLastClick);
return false; return false;
} }
lastClickTime = now; lastClickTime = now;
}, { passive: false, capture: true }); }, { passive: false, capture: true });
// 方案7: 禁用特定元素的默认行为 // 方案6: 针对按钮元素的特殊处理
document.addEventListener('DOMContentLoaded', function() { function addButtonProtection() {
// 为所有按钮添加额外的事件监听 var selectors = [
var buttons = document.querySelectorAll('button, .control-btn, [class*="btn"]'); '.control-btn',
buttons.forEach(function(btn) { '.control-btn.decrease',
btn.addEventListener('touchstart', function(e) { '.control-btn.increase',
e.stopPropagation(); 'button',
}, { passive: false, capture: true }); '[class*="btn"]'
}); ];
});
console.log('iOS Safari 双击缩放防护已启用'); selectors.forEach(function(selector) {
var elements = document.querySelectorAll(selector);
elements.forEach(function(element) {
// 移除所有现有的事件监听器（通过克隆节点）
var newElement = element.cloneNode(true);
element.parentNode.replaceChild(newElement, element);
// 添加新的保护性事件监听器
['touchstart', 'touchend', 'touchmove', 'click', 'dblclick'].forEach(function(eventType) {
newElement.addEventListener(eventType, function(e) {
if (eventType === 'dblclick') {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
}
}, { passive: false, capture: true });
});
});
});
}
// DOM 加载完成后添加按钮保护
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', function() {
setTimeout(addButtonProtection, 100);
// 使用 MutationObserver 监听 DOM 变化
var observer = new MutationObserver(function(mutations) {
addButtonProtection();
});
observer.observe(document.body, {
childList: true,
subtree: true
});
});
} else {
setTimeout(addButtonProtection, 100);
}
// 方案7: 使用 CSS 强制禁用缩放
var style = document.createElement('style');
style.innerHTML = `
* {
touch-action: pan-y !important;
}
.control-btn,
.control-btn *,
button,
button * {
touch-action: none !important;
-webkit-user-select: none !important;
user-select: none !important;
-webkit-touch-callout: none !important;
}
`;
document.head.appendChild(style);
console.log('iOS Safari 双击缩放防护已启用 - UniApp H5 专用版本');
})(); })();
</script> </script>
</head> </head>

280
pages/modify-score/modify-score.vue
View File

@@ -50,13 +50,12 @@
</view> </view>
<view class="score-control"> <view class="score-control">
<!-- 减分按钮 - 使用 catchtouchstart 阻止事件冒泡 -->
<view <view
class="control-btn decrease" class="control-btn decrease"
@touchstart.stop.prevent="handleDecrease" @touchstart="onDecreaseStart"
@touchmove.stop.prevent="noop" @touchend="onDecreaseEnd"
@touchend.stop.prevent="noop" @touchcancel="onTouchCancel"
@touchcancel.stop.prevent="noop"
@click.stop.prevent="noop"
> >
<text class="btn-symbol">－</text> <text class="btn-symbol">－</text>
<text class="btn-value">-0.001</text> <text class="btn-value">-0.001</text>
@@ -67,22 +66,17 @@
<text class="no-modify-text">可不改</text> <text class="no-modify-text">可不改</text>
</view> </view>
<!-- 加分按钮 - 使用 catchtouchstart 阻止事件冒泡 -->
<view <view
class="control-btn increase" class="control-btn increase"
@touchstart.stop.prevent="handleIncrease" @touchstart="onIncreaseStart"
@touchmove.stop.prevent="noop" @touchend="onIncreaseEnd"
@touchend.stop.prevent="noop" @touchcancel="onTouchCancel"
@touchcancel.stop.prevent="noop"
@click.stop.prevent="noop"
> >
<text class="btn-symbol">＋</text> <text class="btn-symbol">＋</text>
<text class="btn-value">+0.001</text> <text class="btn-value">+0.001</text>
</view> </view>
</view> </view>
<!-- <view class="modify-tip">
裁判长修改：保留3位小数点，超过上限或下限时，按钮置灰
</view> -->
</view> </view>
<!-- 备注 --> <!-- 备注 -->
@@ -129,7 +123,14 @@ export default {
note: '', note: '',
minScore: 5.0, minScore: 5.0,
maxScore: 10.0, maxScore: 10.0,
isProcessing: false // 防止双击的状态管理
isTouching: false,
touchTimer: null,
lastTouchTime: 0,
// 长按相关
longPressTimer: null,
longPressInterval: null,
isLongPressing: false
} }
}, },
@@ -139,7 +140,7 @@ export default {
const globalData = app.globalData || {} const globalData = app.globalData || {}
// 获取当前选手信息（从 score-list-multi 页面传递） // 获取当前选手信息（从 score-list-multi 页面传递）
const currentAthlete = globalData.currentAthlete || {} const currentAthlete = globalData.currentAthlete ||
// 获取裁判长ID // 获取裁判长ID
this.modifierId = globalData.judgeId this.modifierId = globalData.judgeId
@@ -156,9 +157,151 @@ export default {
if (currentAthlete.athleteId) { if (currentAthlete.athleteId) {
await this.loadScoreDetail(currentAthlete.athleteId) await this.loadScoreDetail(currentAthlete.athleteId)
} }
// H5 平台特殊处理：禁用双击缩放
// #ifdef H5
this.disableDoubleTapZoom()
// #endif
},
onUnload() {
// 清理定时器
this.clearAllTimers()
}, },
methods: { methods: {
// #ifdef H5
disableDoubleTapZoom() {
// 在 H5 环境下，添加额外的事件监听来防止双击缩放
this.$nextTick(() => {
const decreaseBtn = document.querySelector('.control-btn.decrease')
const increaseBtn = document.querySelector('.control-btn.increase')
const preventZoom = (e) => {
e.preventDefault()
e.stopPropagation()
e.stopImmediatePropagation()
return false
}
if (decreaseBtn) {
decreaseBtn.addEventListener('touchstart', preventZoom, { passive: false, capture: true })
decreaseBtn.addEventListener('touchend', preventZoom, { passive: false, capture: true })
decreaseBtn.addEventListener('touchmove', preventZoom, { passive: false, capture: true })
decreaseBtn.addEventListener('click', preventZoom, { passive: false, capture: true })
}
if (increaseBtn) {
increaseBtn.addEventListener('touchstart', preventZoom, { passive: false, capture: true })
increaseBtn.addEventListener('touchend', preventZoom, { passive: false, capture: true })
increaseBtn.addEventListener('touchmove', preventZoom, { passive: false, capture: true })
increaseBtn.addEventListener('click', preventZoom, { passive: false, capture: true })
}
})
},
// #endif
clearAllTimers() {
if (this.touchTimer) {
clearTimeout(this.touchTimer)
this.touchTimer = null
}
if (this.longPressTimer) {
clearTimeout(this.longPressTimer)
this.longPressTimer = null
}
if (this.longPressInterval) {
clearInterval(this.longPressInterval)
this.longPressInterval = null
}
},
// 减分按钮 - touchstart
onDecreaseStart(e) {
e.preventDefault()
e.stopPropagation()
const now = Date.now()
// 防止快速连续触摸（300ms内的触摸被忽略）
if (now - this.lastTouchTime < 300) {
return
}
this.lastTouchTime = now
this.isTouching = true
// 立即执行一次减分
this.decreaseScore()
// 设置长按定时器（500ms后开始连续减分）
this.longPressTimer = setTimeout(() => {
this.isLongPressing = true
// 每100ms执行一次减分
this.longPressInterval = setInterval(() => {
this.decreaseScore()
}, 100)
}, 500)
},
// 减分按钮 - touchend
onDecreaseEnd(e) {
e.preventDefault()
e.stopPropagation()
this.isTouching = false
this.isLongPressing = false
this.clearAllTimers()
},
// 加分按钮 - touchstart
onIncreaseStart(e) {
e.preventDefault()
e.stopPropagation()
const now = Date.now()
// 防止快速连续触摸（300ms内的触摸被忽略）
if (now - this.lastTouchTime < 300) {
return
}
this.lastTouchTime = now
this.isTouching = true
// 立即执行一次加分
this.increaseScore()
// 设置长按定时器（500ms后开始连续加分）
this.longPressTimer = setTimeout(() => {
this.isLongPressing = true
// 每100ms执行一次加分
this.longPressInterval = setInterval(() => {
this.increaseScore()
}, 100)
}, 500)
},
// 加分按钮 - touchend
onIncreaseEnd(e) {
e.preventDefault()
e.stopPropagation()
this.isTouching = false
this.isLongPressing = false
this.clearAllTimers()
},
// 触摸取消
onTouchCancel(e) {
e.preventDefault()
e.stopPropagation()
this.isTouching = false
this.isLongPressing = false
this.clearAllTimers()
},
async loadScoreDetail(athleteId) { async loadScoreDetail(athleteId) {
try { try {
uni.showLoading({ uni.showLoading({
@@ -166,9 +309,6 @@ export default {
mask: true mask: true
}) })
// 🔥 关键改动：使用 dataAdapter 获取评分详情
// Mock模式：调用 mock/score.js 的 getScoreDetail 函数
// API模式：调用 api/score.js 的 getScoreDetail 函数（GET /api/mini/score/detail/{athleteId}）
const response = await dataAdapter.getData('getScoreDetail', { const response = await dataAdapter.getData('getScoreDetail', {
athleteId: athleteId athleteId: athleteId
}) })
@@ -214,54 +354,29 @@ export default {
uni.navigateBack() uni.navigateBack()
}, },
// 空操作函数，用于阻止事件
noop() {
// 什么都不做
},
handleDecrease(e) {
// 防止重复处理
if (this.isProcessing) {
return
}
this.isProcessing = true
// 执行减分逻辑
this.decreaseScore()
// 使用 requestAnimationFrame 确保在下一帧重置状态
requestAnimationFrame(() => {
this.isProcessing = false
})
},
handleIncrease(e) {
// 防止重复处理
if (this.isProcessing) {
return
}
this.isProcessing = true
// 执行加分逻辑
this.increaseScore()
// 使用 requestAnimationFrame 确保在下一帧重置状态
requestAnimationFrame(() => {
this.isProcessing = false
})
},
decreaseScore() { decreaseScore() {
if (this.currentScore > this.minScore) { if (this.currentScore > this.minScore) {
this.currentScore = parseFloat((this.currentScore - 0.001).toFixed(3)) this.currentScore = parseFloat((this.currentScore - 0.001).toFixed(3))
// 添加触觉反馈（仅在支持的平台）
// #ifndef H5
uni.vibrateShort({
type: 'light'
})
// #endif
} }
}, },
increaseScore() { increaseScore() {
if (this.currentScore < this.maxScore) { if (this.currentScore < this.maxScore) {
this.currentScore = parseFloat((this.currentScore + 0.001).toFixed(3)) this.currentScore = parseFloat((this.currentScore + 0.001).toFixed(3))
// 添加触觉反馈（仅在支持的平台）
// #ifndef H5
uni.vibrateShort({
type: 'light'
})
// #endif
} }
}, },
@@ -290,9 +405,6 @@ export default {
mask: true mask: true
}) })
// 🔥 关键改动：使用 dataAdapter 修改评分
// Mock模式：调用 mock/score.js 的 modifyScore 函数
// API模式：调用 api/score.js 的 modifyScore 函数（PUT /api/mini/score/modify）
const response = await dataAdapter.getData('modifyScore', { const response = await dataAdapter.getData('modifyScore', {
athleteId: this.athleteInfo.athleteId, athleteId: this.athleteInfo.athleteId,
modifierId: this.modifierId, modifierId: this.modifierId,
@@ -513,41 +625,22 @@ export default {
} }
.control-btn { .control-btn {
/* 关键：完全禁用所有触摸行为 */
touch-action: none !important;
-webkit-tap-highlight-color: transparent !important;
-webkit-touch-callout: none !important;
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important;
/* 防止长按菜单 */
-webkit-touch-callout: none !important;
/* 防止文本选择 */
pointer-events: auto !important;
width: 140rpx; width: 140rpx;
height: 140rpx; height: 140rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: #F5F5F5;
border-radius: 12rpx; border-radius: 12rpx;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
overflow: hidden;
}
.control-btn::before { /* 关键：禁用所有可能导致缩放的触摸行为 */
content: ''; touch-action: none;
position: absolute; -webkit-tap-highlight-color: transparent;
top: 0; -webkit-touch-callout: none;
left: 0; -webkit-user-select: none;
right: 0; user-select: none;
bottom: 0;
background-color: transparent;
z-index: 1;
} }
.control-btn.decrease { .control-btn.decrease {
@@ -561,9 +654,7 @@ export default {
.btn-symbol { .btn-symbol {
font-size: 48rpx; font-size: 48rpx;
font-weight: 300; font-weight: 300;
pointer-events: none !important; pointer-events: none;
user-select: none !important;
-webkit-user-select: none !important;
} }
.control-btn.decrease .btn-symbol { .control-btn.decrease .btn-symbol {
@@ -577,9 +668,7 @@ export default {
.btn-value { .btn-value {
font-size: 24rpx; font-size: 24rpx;
margin-top: 8rpx; margin-top: 8rpx;
pointer-events: none !important; pointer-events: none;
user-select: none !important;
-webkit-user-select: none !important;
} }
.control-btn.decrease .btn-value { .control-btn.decrease .btn-value {
@@ -608,13 +697,6 @@ export default {
margin-top: 8rpx; margin-top: 8rpx;
} }
.modify-tip {
font-size: 24rpx;
color: #FF4D6A;
line-height: 1.6;
text-align: center;
}
/* 备注 */ /* 备注 */
.note-section { .note-section {
margin: 30rpx; margin: 30rpx;