我的问题主要是，一个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: '2
4px',
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>
);
}
但是这样对于我来说有点鸡肋
本文介绍了解决Android 4.0和4.4版本中touch事件导致页面无法正常滑动的问题。通过在touchstart事件中加入event.preventDefault()来阻止浏览器默认行为，从而实现了页面的正常滑动。
扫一扫
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
