防止在父母但不是孩子touchmove默認

我正在爲iPad創建一個小的web應用程序，我有幾個元素，我阻止用戶通過防止touchmove事件的默認滾動。不過，我有一種情況，我需要用戶能夠滾動一個子元素。防止在父母但不是孩子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(); 

});

來源

2012-02-28 will

嘗試添加返回false;在事件處理程序結束時 – jancha 2012-02-28 16:56:51

寫** stopPropagation **而不是** stopPropogation ** – udidu 2012-02-28 17:07:43

哈，是的，幸運的是，我實際上是在我的代碼中正確輸入它;） – will 2012-02-28 17:11:34

試試這個：

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

EDITED

e.target包含觸摸事件的最終目標節點。您可以停止所有不是「冒泡穿越」您的.scroll div的事件。

我認爲有更好的解決方案，但這一個必須確定。

來源

2012-02-28 17:48:47 Grsmto

我見過的最佳解決方案。 +1 – EoghanTadhg 2016-06-24 22:13:20

我發現了一個有趣的討論，在這裏：https://github.com/joelambert/ScrollFix/issues/2，而且也從bjrn

一個很好的解決方案基本上，它需要的柔性盒的優勢。在iPad上爲我工作得很好。這裏是他設置的一個測試鏈接，它可以在工作中顯示它：http://rixman.net/demo/scroll/

這個解決方案特別好的是它是所有的CSS，並且不需要JavaScript。

來源

2012-09-20 14:41:00 ryan

這看起來很有趣，我會看看，謝謝！ – will 2012-10-03 09:10:14

這應該工作：

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

來源

2013-01-23 19:56:38 nick

upvoted you，雖然我更喜歡'.closest（選擇器）' – 2014-12-23 21:34:59

該主題指定父，而不是元素本身，所以使用最接近（）將不正確。 – nick 2014-12-24 23:03:24

更清晰的寫法是： '$（document）.on（「touchmove」，function（e）{e.preventDefault（）}）; （文件）.on（「touchmove」，「.scroll」，function（e）{e.stopPropagation（）}）;' – gwendall 2015-04-30 14:51:55

我發現使用CSS類和document.ontouchmove另一種解決方案。我正在開發一個帶有滑塊的iPad Web應用程序，並且希望在出現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; 
}

現在，只有股利的TouchMove事件「touchmove_enabled」被觸發。

也許我的解決方案可能對某人有用。帕特里克

來源

2013-04-24 14:48:00

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

的想法是，你的主要滾動始終是（你的自由裁量權）禁用，但在你的內心，滾動可以防止冒泡（或傳播）的事件，所以它永遠不會到達第一事件監聽器，它最終會取消touchmove事件。

我希望這是你正在尋找的。我遇到了類似於你的情況，主要滾動功能在平板電腦上被禁用，但我想要一個內部滾動功能。這似乎是做這項工作。

來源

2013-09-19 14:08:08 Prusprus

防止在父母但不是孩子touchmove默認

回答

相關問題