jquery - 防止元素在触摸设备上被拖动

Question

我尝试使用 css 和 jquery 编写自己的推送菜单。

问题是，在触摸设备上，您可以向左“拖动”.wrapper，当它打开时它会与导航元素重叠——看起来很糟糕!

我该如何防止这种情况发生？我不希望 .wrapper 是 position:fixed。

这是我的 fiddle :http://jsfiddle.net/danieljoseph/cL0ej1v3/1/

这里是 jquery:

$("#menuToggle").click(function() {
$('.wrapper, header, nav').toggleClass('push');
});

$("nav a").click(function(){
setTimeout(function(){
        $(".wrapper,header,nav").removeClass('push');
},1000);
});

$(".wrap").click(function(){
$(".wrapper,header,nav").removeClass('push');
});

这是CSS:

body {
margin:0;
padding:0;
overflow-x:hidden;
}
.wrapper {
position:relative;
float:left;
width:100%;
height:100%;
z-index:0;
top:0;
left:0;
overflow-x:hidden;
background:#000;
transition:all 1s ease;
-ms-transition:all 1s ease;
-webkit-transition:all 1s ease;
}
header {
position:fixed;
z-index:10;
float:left;
width:100%;
background:#F00;
border-bottom:solid 1px #CCC;
transition: all 1s ease;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
height:60px;
}
nav {
position:fixed;
margin-left:-200px;
left:0;
top:0;
z-index:0;
width:200px;
height:100%;
float:left;
color:#fff;
background:#030e17;
transition: all 1s ease;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
}
nav a {
display:block;
}
#content {
width:100%;
height:30000px;
}
#menuToggle {
width:50px;
height:50px;
background:#0cff00;
cursor:pointer;
}
.push {
left:200px;
}

如果您需要更多详细信息，请告诉我。 :)

Answer 1

你也许可以用 CSS 做到这一点，只需在主体上放置一个 overflow:hidden...

您也可以使用下面的 JS 来禁用 touchmove 事件:

JS:

$(window).bind(
   'touchmove',
   function(e) {
   e.preventDefault();
   }
);