[英]Prevent touchmove default on parent but not child
我正在为iPad创建一个小的Web应用程序，我有几个元素，我阻止用户滚动，防止touchmove事件的默认。 但是，我有一种情况，我需要用户能够滚动子元素。
我试过使用e.stopPropagation（）; 但没有运气！ 我还尝试检测手指下的元素并放入e.preventDefault（）; 在if语句中，但再次，没有运气。 或者也许我只是混淆了......
有任何想法吗？ 从#fix div中删除.scroll div是最后的手段，因为它会引起各种令人头疼的问题。
编辑
我设法对它进行排序。 好像我不明白使用.stopPropagation（）; 哎呀！
工作代码：
<div id="fix">
<h1>Hi there</h1>
<div class="scroll">
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>
<div class="scroll">
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>
</div>
和Javascript：
$('body').delegate('#fix','touchmove',function(e){
e.preventDefault();
}).delegate('.scroll','touchmove',function(e){
e.stopPropagation();
});
试试这个：
$('#fix').on('touchmove',function(e){
if(!$('.scroll').has($(e.target)).length)
e.preventDefault();
});
EDITED
e.target包含触摸事件的最终目标节点。 您可以停止所有不会在您的.scroll div中“冒泡”的事件。
我认为有更好的解决方案，但这个必须没问题。
document.addEventListener('touchmove', function(e){e.preventDefault()}, false);
document.getElementById('inner-scroll').addEventListener('touchmove', function(e){e.stopPropagation()}, false);
这个想法是你的主卷轴总是（由你自行决定）禁用，但在你的内部滚动中你可以防止事件冒泡（或传播），所以它永远不会到达第一个事件监听器，这最终会取消touchmove事件。
我希望这就是你要找的东西。 我有一个类似于你的情况，主要滚动在平板电脑上禁用，但我想要一个内部滚动工作。 这似乎完成了这项工作。
这应该工作：
$(document).on('touchmove', function(e) {
if (!$(e.target).parents('.scroll')[0]) {
e.preventDefault();
}
});
我在这里找到了一个有趣的讨论： https ： //github.com/joelambert/ScrollFix/issues/2 ，这是bjrn的一个很好的解决方案
基本上，它利用了柔性盒子。 在ipad上为我工作得很好。 这是他设置的测试链接，显示它在工作： http ： //rixman.net/demo/scroll/
这个解决方案特别好的是它是所有CSS而不需要javascript。
我找到了另一种使用css-classes和document.ontouchmove的解决方案。 我正在开发一个带有滑块的IPad Webapp，并希望在有touchmove事件时阻止所有其他元素反弹。 这是我作为摘要的解决方案：
HTML：
<body>
<div id="outterFrame" class="fullscreen"> <!-- class fullscreen is self-explaining I guess -->
<div id="touchmove_enabled class="enable_touchmove sliderbutton">Button</div>
</div>
</body>
使用Javascript：
/* preventDefault on touchmove events per default */
document.ontouchmove = function(event)
{
var sourceElement = event.target || event.srcElement;
if(!hasClass(sourceElement,"enable_touchmove"))
{
e.preventDefault();
}
};
/* helper method "hasClass" */
function hasClass(element,class)
{
if(element.className != null)
{
return element.className.match(new RegExp('(\\s|^)'+class+'(\\s|$)'));
}
return false;
}
现在，只触发div“touchmove_enabled”的touchmove事件。
可能我的解决方案可能对某人有用。 帕特里克
如何防止默认浏览器滚动与节流功能结合使用的touchmove
[英]How to prevent default browser scrolling an touchmove combined with a throttled function
在满足条件之前阻止touchmove默认（浏览器滚动）吗？
[英]Prevent touchmove default (browser scrolling) until condition is met?
如何防止 iOS 5 中 touchmove 事件的默认行为？
[英]How do I prevent the default behavior of the touchmove event in iOS 5?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.