防止在父级而非子级上触摸移动默认值

我正在为iPad创建一个小的Web应用程序，我有几个元素，我阻止用户通过阻止touchmove事件的默认滚动。 但是，我有一种情况，我需要用户能够滚动子元素。

我试过用e.stopPropagation（）; 但没有运气！ 我还尝试检测手指下的元素并放入e.preventDefault（）; 在if语句中，但再次，没有运气。 或者也许我只是混淆了……

有任何想法吗？ 从#fix div中删除.scroll div是最后的手段，因为它会引起各种令人头疼的问题。

---

编辑

我设法对它进行排序。 好像我不明白使用.stopPropagation（）; 哎呀！

工作代码：

 
Hi there
 
 
 
List item
 
List item
 
List item
 
 
 
 
 
List item
 
List item
 
List item
 
 
  

和Javascript：

 $('body').delegate('#fix','touchmove',function(e){ e.preventDefault(); }).delegate('.scroll','touchmove',function(e){ e.stopPropagation(); }); 

Answer 1

试试这个：

 $('#fix').on('touchmove',function(e){ if(!$('.scroll').has($(e.target)).length) e.preventDefault(); }); 

EDITED

e.target包含触摸事件的最终目标节点。 您可以停止所有不是“冒充”.scroll div的事件。

我认为有更好的解决方案，但这个必须没问题。

Answer 2

 document.addEventListener('touchmove', function(e){e.preventDefault()}, false); document.getElementById('inner-scroll').addEventListener('touchmove', function(e){e.stopPropagation()}, false); 

这个想法是你的主卷轴总是（由你自行决定）禁用，但在你的内部滚动中你可以防止事件冒泡（或传播），所以它永远不会到达第一个事件监听器，这最终将取消触摸移动事件。

我希望这就是你要找的东西。 我有一个类似于你的情况，主要滚动在平板电脑上禁用，但我想要一个内部滚动工作。 这似乎完成了这项工作。

Answer 3

这应该工作：

 $(document).on('touchmove', function(e) { if (!$(e.target).parents('.scroll')[0]) { e.preventDefault(); } }); 

Answer 4

我在这里找到了一个有趣的讨论： https ： //github.com/joelambert/ScrollFix/issues/2 ，这是bjrn的一个很好的解决方案

基本上，它利用了柔性盒。 在ipad上为我工作得很好。 这是他设置的测试链接，显示它在工作： http ： //rixman.net/demo/scroll/

这个解决方案特别好的是它是所有CSS而不需要javascript。

Answer 5

我找到了另一种使用css-classes和document.ontouchmove的解决方案。 我正在开发一个带有滑块的IPad Webapp，并希望在有touchmove事件时阻止所有其他元素反弹。 这是我作为摘要的解决方案：

HTML：

  
  
Button
 
  

使用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事件。

可能我的解决方案可能对某人有用。 帕特里克