我的
问题主要是，一个nextjs的网站可以正常使用，但是在android studio切换到安卓7版本，点击
事件实效了，我需要进行排查为什么，目前可行的方法是export default function TestButton() {
return (
<div>
<script dangerouslySetInnerHTML={{
__html
: `
console.log('🚀 Test page loaded');
let count = 0;
function updateCount() {
count++;
document.getElementById('counter').textContent = count;
document.getElementById('log').innerHTML += '<div>' + new Date().toLocaleTimeString() + '
: Count updated to ' + count + '</div>';
console.log('Count updated to
:', count);
}
function handleClick() {
console.log('handleClick called');
updateCount();
}
function handle
Touch() {
console.log('handle
Touch called');
updateCount();
}
// Wait for DOM
setTimeout(function() {
var button = document.getElementById('testBtn');
if (button) {
console.log('Button found, adding listeners');
// Add all possible events
button.addEventListener('click', handleClick, false);
button.addEventListener('
touchend', handle
Touch, false);
button.addEventListener('
touchstart', function(e) {
console.log('
touchstart detected');
}, false);
button.addEventListener('mousedown', function(e) {
console.log('mousedown detected');
}, false);
console.log('All event listeners added');
} else {
console.log('Button not found!');
}
}, 100);
`
}} />
<div style={{ padding
: '20px', fontFamily
: 'Arial' }}>
<h2>原生 HTML 测试 (Android 7)</h2>
<button
id="testBtn"
style={{
width
: '200px',
height
: '80px',
fontSize
: '24px',
backgroundColor
: '#ff0000',
color
: 'white',
border
: 'none',
borderRadius
: '10px',
cursor
: 'pointer',
touchAction
: 'manipulation'
}}
>
点击测试
: <span id="counter">0</span>
</button>
<div style={{ marginTop
: '20px' ,color
: 'white'}}>
<h3>日志
:</h3>
<div id="log" style={{
border
: '1px solid #ccc',
padding
: '10px',
minHeight
: '100px',
fontSize
: '12px'
}}></div>
</div>
<div style={{ marginTop
: '20px' }}>
<p><strong>User Agent
:</strong> <span id="ua"></span></p>
<p><strong>
Touch Support
:</strong> <span id="
touch"></span></p>
</div>
</div>
</div>
);
}
但是这样对于我来说有点鸡肋
本文详细记录了一位开发者如何通过debug技术成功找出浏览器导致的fixed定位元素在页面滚动后touch事件失效的问题，并提供了相关解决方案。参考了《我是如何通过debug成功甩锅浏览器的》及另一篇技术博客，对于移动端Web开发中遇到此类问题的程序员具有参考价值。
扫一扫
233
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
