单击启用/禁用touchmove

我目前正在构建一个具有非常简单的叠加效果的网站 – 我有一个’汉堡包’（ .mobilemenu ）菜单图标，当点击时会切换导航覆盖图上的伪类（ .mobile-nav ）。 我想添加一些代码，这些代码也会在初始点击时禁用touchmove ，当再次单击（ .mobilemenu ）时，恢复默认行为。

这是我的代码：

 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 ？

编辑：关于@John R的建议我稍微改变了我的代码的语法 – 这是一个小提琴： JS小提琴

我的代码现在看起来如下：

 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，false’工作。 唯一的问题是它没有切换所以滚动永久禁用！

 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/

Answer 1

改变这个

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

至

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

Answer 2

在jQuery中的所有Element选择之前不要忘记$或“jQuery”…要使If语句工作，它需要

 if (true) { ...something }; 

所以你的jQuery（’。mobile-nav’）。hasClass（’active’）=== true

所以你需要将它封装在括号中，所以

jQuery('.mobile-nav').hasClass('active')需要在括号中…

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

Answer 3

好的解决方案（经过大量的试验和错误以及花费了太多时间在这上面！）非常简单 – 使用.on()绑定并通过.on()解.on() – 这是最终的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); } }); 

如果任何人都能看到这种方法中的任何缺陷或者如何将其结合起来那将是非常好的。 似乎工作得很好！