啓用/禁用touchmove點擊

我目前正在建立一個非常簡單的覆蓋效果的網站 - 我有一個'漢堡'（.mobilemenu）菜單圖標，當點擊切換我的導航覆蓋圖上的僞類時（.mobile-nav）。我正在尋找添加一些代碼，這些代碼還會在初始點擊時禁用touchmove，並且當再次單擊（.mobilemenu）時，將恢復默認行爲。啓用/禁用touchmove點擊

這是我的代碼，因爲它代表：

jQuery('.mobilemenu').click(function(e) { 
    jQuery(this).toggleClass('is-active'); 
    jQuery('.mobile-nav').toggleClass('active'); 


    e.preventDefault(); 
});

我試過如下：

jQuery('.mobilemenu').click(function(e) { 
    jQuery(this).toggleClass('is-active'); 
    jQuery('.mobile-nav').toggleClass('active'); 
    if('.mobile-nav').hasClass('active') { 
     $(body).on('touchmove', function(e) { 
     e.preventDefault(); 
     }}; 

    e.preventDefault(); 
});

這顯然是行不通的！

坦率地說，Javascript/JQuery對我來說很新，所以我確信這裏的語法不正確。我是否可以切換觸摸移動被禁用的主體類？或者我必須以某種方式重寫代碼並使用bind？

編輯：在@約翰R的建議，我已經改變了我的代碼的語法稍有 - 這是一個小提琴：JS fiddle

我現在的代碼如下：

jQuery('.mobilemenu').click(function(e) { 
    jQuery(this).toggleClass('is-active'); 
    jQuery('.mobile-nav').toggleClass('active'); 
    if(jQuery('.mobile-nav').hasClass('active')) { 
    $(body).on('touchmove', function(e) { 
    e.preventDefault(); 
    }}; 

e.preventDefault(); 
});

但是，這似乎完全殺死了覆蓋！我猜測雖然if(jQuery('.mobile-nav').hasClass('active')) {等現在是正確的，但下面的內容可能不是？

編輯2：那麼一點玩弄我已經更新了語法後，覆蓋重新工作，但我仍然可以滾動頁面的主體iPhone上的覆蓋背後：http://jsfiddle.net/jameshenry/bzau0jaz/1/ - 如果誰有我真的很感激！

jQuery('.mobilemenu').click(function(e) { 
    jQuery(this).toggleClass('is-active'); 
    jQuery('.mobile-nav').toggleClass('active'); 

    if(jQuery('.mobile-nav').hasClass('active')) { 
     $(body).on('touchmove', function(e){ 
      e.preventDefault()} 
       )}; 
});

編輯3：與結構玩弄和語法之後多一點，我終於拿到了「touchmove，假」點擊後工作。唯一的問題是它不切換，所以滾動永久禁用！

jQuery('.mobilemenu').click(function(e) { 
    jQuery(this).toggleClass('is-active'); 
    jQuery('.mobile-nav').toggleClass('active'); 

    if(jQuery('.mobile-nav').hasClass('active')) { 
     $('body').on('touchmove', false); 
    }; 
});

我想一個else語句是要走的路，但我已經嘗試添加以下內容：

jQuery('.mobilemenu').click(function(e) { 
    jQuery(this).toggleClass('is-active'); 
    jQuery('.mobile-nav').toggleClass('active'); 

    if(jQuery('.mobile-nav').hasClass('active')) { 
     $('body').on('touchmove', false); 
    }; 
    else { $('body').on('touchmove', true);}; 
});

但是，這似乎只是停止工作覆蓋 - 有什麼辦法在關閉時重新開啓「touchmove」？這裏是一個小提琴http://jsfiddle.net/jameshenry/bzau0jaz/2/

來源

2015-10-19 hj8ag

更正您的語法，如John R.所述，並嘗試使用css'Pointer-events：none'聲明具有樣式和切換條件的類。 https://css-tricks.com/almanac/properties/p/pointer-events/。在現代瀏覽器上支持。對於IE 9瀏覽器，Javascript是唯一的方法。 – Nirus

好的解決方案（後大量的試驗和錯誤，以及花費太多的時間在這方面！）真的很簡單 - 綁定使用.on()和解除綁定通過.off - 這是最終的jQuery代碼：

jQuery('.mobilemenu').click(function(e) { 
    jQuery(this).toggleClass('is-active'); 
    jQuery('.mobile-nav').toggleClass('active'); 
     if(jQuery('.mobile-nav').hasClass('active')) { 
      $('body').on('touchmove', false); 
     } else { 
      $('body').off('touchmove', false); 
     } 
});

如果任何人都能看到這種方法的任何缺陷或將它整合起來的方式，那將是很棒的。似乎很好地工作！

來源

2015-10-20 08:35:20 hj8ag

更改此

if('.mobile-nav').hasClass('active'){ 
    //... 
}

要

if(jQuery('.mobile-nav').hasClass('active')){ 
    //... 
}

來源

2015-10-19 11:57:36

我已經根據您的建議修改了代碼，但是我認爲我仍然在某處出錯，因爲我的覆蓋現在根本無法工作 - 我已將它放到了一個小提琴：http://jsfiddle.net/jameshenry/xbgu406a/ 我的代碼如下： 'jQuery（'。mobilemenu'）。click（function（e）{0} {0} {0}主動'）; jQuery（'。mobile-nav'）。toggleClass（'active'）; if（jQuery（'。mobile-nav'）。hasClass（'active'））{ $（body）.on （'touchmove'，function（e）{ e.preventDefault（）; }}; e.preventDefault（）; }）;' – hj8ag

jQuery中的所有元素選擇此之前不要忘$或「jQuery的」 ...使IF語句工作，它需要

if (true) { ...something };

所以對於你的jQuery（」。移動-N AV「）。hasClass（ '活動'）===真

，所以你需要將其封裝在括號中，所以

jQuery('.mobile-nav').hasClass('active') 需要在括號...

if(jQuery('.mobile-nav').hasClass('active')){ 
    //doSomething 
}

來源

2015-10-19 12:54:34 Alireza

Update d使用正確的語法，但仍然不能運行--http：//jsfiddle.net/jameshenry/bzau0jaz/1 – hj8ag

啓用/禁用touchmove點擊

回答

相關問題