Sco*_*ter 55 javascript touch jquery-mobile
我有一个页面,其中有一个部分用于绘制图纸.但是,当在移动浏览器上使用时,touchmove事件(至少是垂直事件)也会滚动页面(这会降低草图体验的性能).有没有办法要么a)禁用并重新启用页面的滚动(所以我可以在每行启动时将其关闭,但在每次完成后将其重新打开),或者b)禁用默认处理touchmove事件(可能是滚动)转到绘制草图的画布(我不能完全禁用它们,因为草图使用它们)？
我已经使用jquery-mobile vmouse处理程序作为草图,如果这有所不同.
更新:在iPhone上,如果我选择要绘制的画布,或者只是在绘制之前握住我的手指,页面不会滚动,而不是因为我在页面中编码的任何内容.
Joh*_*isz 68
将touch-action CSS属性设置为none,即使对被动事件侦听器也是如此:
touch-action: none;
当事件源自该元素时,将此属性应用于元素将不会触发默认(滚动)行为.
Tur*_*erj 41
类似于@Llepwryd给出了答案,我用的组合touch-action,并ontouchstart防止滚动时,它是有一定的元素.
从我的项目中采取原样:
window.blockMenuHeaderScroll = false;
$(window).on('touchstart', function(e)
{
if ($(e.target).closest('#mobileMenuHeader').length == 1)
{
blockMenuHeaderScroll = true;
}
});
$(window).on('touchend', function()
{
blockMenuHeaderScroll = false;
});
$(window).on('touchmove', function(e)
{
if (blockMenuHeaderScroll)
{
e.preventDefault();
}
});
基本上,我正在做的是在触摸开始时查看它是否从一个使用jQuery的另一个孩子的元素开始,ontouchmove并允许它在滚动时打开/关闭触摸动作.该.closest指触摸开始始于元素.
您希望阻止触摸移动事件的默认值,但是您还需要在触摸事件结束时清除此标志,否则触摸滚动事件将无效.
这可以在没有jQuery的情况下完成,但是对于我的用法,我已经有了jQuery并且不需要编写代码来查找元素是否具有特定父级.
截至2013-06-18,在Android和Chrome Touch上测试Chrome
Meh*_*hdi 21
CSS上有一点"黑客",它也允许你禁用滚动:
.lock-screen {
height: 100%;
overflow: hidden;
width: 100%;
position: fixed;
}
将该类添加到正文将阻止滚动.
小智 18
document.addEventListener('touchstart', function(e) {e.preventDefault()}, false);
document.addEventListener('touchmove', function(e) {e.preventDefault()}, false);
这应该可以防止滚动,但除非您定义自定义方式来处理它们,否则它也会破坏其他触摸事件.
小智 6
最终的解决方案将像这样overflow: hidden;设置：document.documentElement
/* element is an HTML element You want catch the touch */
element.addEventListener('touchstart', function(e) {
document.documentElement.style.overflow = 'hidden';
});
document.addEventListener('touchend', function(e) {
document.documentElement.style.overflow = 'auto';
});
通过设置overflow: hidden触摸开始，它会使超出窗口的所有内容都隐藏，从而消除滚动任何内容的可用性（没有可滚动的内容）。
设置为（默认值）后touchend可以释放锁。overflowauto
最好将其附加到后面，<html>因为<body>可能会用于进行一些样式设置，而且它可能会让孩子表现出意想不到的行为。
编辑：关于-根据 MDNtouch-action: none; Safari 不支持它。
| 归档时间： |
|
| 查看次数： |
96345 次 |
| 最近记录： |