gpt4 book ai didi

html - 防止在 html5 canvas touchmove 事件期间滚动

转载 作者:太空狗 更新时间:2023-10-29 15:06:25 26 4
gpt4 key购买 nike

如何在不阻止默认设置的情况下阻止滚动,因为我仍然希望处理 touchmove 事件:

    <!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>
<canvas id="myCanvas" width="1600px" height="1600px" style="border:1px dashed gray;background-color:white;">
</canvas>

<script>

function brushStart() {
$('#myCanvas').css('background-color','blue');
}
function brushEnd() {
$('#myCanvas').css('background-color','red');
}
function brushMove() {
$('#myCanvas').css('background-color','yellow');
}

$('#myCanvas').bind('mousedown', brushStart);
$('#myCanvas').bind('mouseup', brushEnd);
$('#myCanvas').bind('mousemove', brushMove);
$('#myCanvas')[0].addEventListener('touchstart',brushStart,false);
$('#myCanvas')[0].addEventListener('touchend',brushEnd,false);
$('#myCanvas')[0].addEventListener('touchmove',brushMove,false);

</script>

</body>
</html>

最佳答案

当你说你希望它被处理时 - 它仍然可以。就这样写吧:

$('#myCanvas')[0].addEventListener('touchmove', function(e) {
e.preventDefault();
brushMove();
},false);

我不保证单独使用 preventDefault 会停止滚动,但如果您希望它阻止默认设置并执行您自己的方法,那么您应该这样写。您也可以将调用放在 brushMove 本身中。

我只想说,您可能需要在 touchStart 而不是 touchMove 中执行 preventDefaulttouchMove 实际上可能为时已晚,因为如果它正在滚动,则可能没有 touchMove 事件!

关于html - 防止在 html5 canvas touchmove 事件期间滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9811010/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com