防止與網頁上的元素進行交互時發生滑動事件

我正在構建一個基本上是一系列幻燈片的iPad應用程序。防止與網頁上的元素進行交互時發生滑動事件

當我讀完幻燈片後，我可以滑動到下一張幻燈片*（使用Zepto的輕掃），它將window.location更改爲下一張幻燈片。（滑動事件綁定到window.body，因爲它需要在整個頁面上工作）...

這是一個問題：一些幻燈片具有互動元素，如按鈕，可拖動項等。問題是，使用其中一些交互式元素時會觸發滑動事件。

有誰知道在這些情況下防止刷卡觸發的方法嗎？也許設置敏感度等？

我難過...

祝你好運，萬分感謝！

來源

2013-02-24 Chris

我相信滑動事件是從文檔級事件中生成的。如果你的元素級觸摸*事件調用'stopPropigation（）'，那應該防止產生滑動事件。 – 2013-02-24 18:27:01

你好夥伴對不起，在這裏很厚 - 你能解釋一個白癡（我！）:)我很努力去理解...... – Chris 2013-02-24 18:30:59

Zepto管理觸摸事件的方式是將偵聽器綁定到document.body上的touchstart,touchend和touchmove事件。然後它執行關於要發送的事件的計算並觸發接收到事件的元素上的事件。然後這個事件通過DOM樹起泡，喚起每個元素的監聽器。

這給了我們防止滑動事件的方式有兩種：

首先，你可以這樣做：

$('#my-child-element').bind('touchstart touchend touchup', function(event) { 
    event.stopPropagation(); 
});

當你的子元素收到一個觸摸事件，它會阻止它傳播到父元素，最重要的是身體標記。這樣可以防止Zepto觸摸處理器執行任何操作，阻止在該元素中操作時發生的輕掃，輕擊，單擊，longTap和doubleTap事件。

因爲刷卡事件也泡，你也只是防止起泡，以你的元素偵聽頁面變化的特定事件揮筆：

$('#my-child-element').bind('swipeLeft swipeRight', function(event) { 
    event.stopPropagation(); 
});

這將允許您仍然收到的Zepto內部產生的事件您子元素，但不在外面。 Zepto輕拍事件對您孩子中的所有元素仍然有效。

小提琴這裏：http://jsfiddle.net/bnickel/dUuUd/

來源

2013-02-25 15:46:49

希望「excludedElements」的方法會幫助你，像下面。

$(".block").swipe({ 
    swipe: function (event, direction, distance, duration, fingerCount, fingerData) { 

    }, 
    excludedElements: ".link, a", 
    threshold: 0 
});

來源

2016-11-10 12:50:08 Jaison

防止與網頁上的元素進行交互時發生滑動事件

回答

相關問題