为什么要阻止默认行为

老师你好，请问为什么要阻止默认行为？e.preventDefault();是使用touch的时候都要在对应的盒子阻止默认行为的吗？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Document</title>
<style>
#test {
font-size: 36px;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="test">
touch events test
</div>
<script src="zepto.min.js"></script>
<script src="touch.js"></script>
<script>
$(function(){
$('#test').on('touchmove',function(e){
e.preventDefault();
});
listenTo('#test');
function listenTo(id){
$(id).tap(function(){
console.log(' | tap!（即点击）');
})
.doubleTap(function(){
console.log(' | doubleTap!（即双击）');
})
.swipe(function(){
console.log(' | swipe!（即 滑动）');
})
.swipeLeft(function(){
console.log(' | swipeLeft!（即 向左滑动）');
})
.swipeRight(function(){
console.log(' | swipeRight!（即 向右滑动）');
})
.swipeUp(function(){
console.log(' | swipeUp!（即 向上滑动）');
})
.swipeDown(function(){
console.log(' | swipeDown!（即 向下滑动）');
})
.longTap(function(){
console.log(' | longTap!（即 长按 ）');
})
.singleTap(function(){
console.log(' | singleTap!（即 单击 ）');
})
}
 
})
</script>
</body>
</html>

慕用4150088 2018-01-29

源自：zepto（选修） 7-1 zepto中的touch模块

收起

2回答

一路电光带火花 2018-01-29 19:03:49

你看下这个，还不错的，应该可以解决你的问题

http://www.qdfuns.com/notes/21896/30348b857757f18cde60e7b4c885fe6e.html

收起回答

小于飞飞 2018-01-29 14:39:13

手机本身是会有滚动的功能的，用到touch事件，就会触发手机上面的默认滚屏，因此应该把它默认的滚动给禁止了，编写自己需要的代码。

收起回答

提问者慕用4150088 #1

老师，你好，我想问一下，我直接在body元素中touchmove绑定事件，阻止默认行为有效果的吗？我不是说真的要在body中阻止它，我真正想问的问题是父级爷级元素touchmove设定阻止默认有没有效果？还有一个问题，就是阻止默认行为应该也可能导致问题的吧？什么时候需要将默认行为恢复，以及如果要恢复时，要写一行什么语句？

2018-01-29 17:50:35