JavaScript中防止微信浏览器被整体拖动的方法

html  head    title 微信拖动测试    meta(charset="utf-8")    meta(name="viewport", content="initial-scale=1, maximum-scale=1, minimum-scale=1")    link(rel='stylesheet', href='/stylesheets/style.css')    script(src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js")  body    #container      .header        | header      .page        .box box1 in page        .box box2 in page        .box box3 in page        .box.bottom box4 in page  script.    $(function() {      var startY, endY;      var box_height = $('#container').height();      $('.page').on('touchstart', function(event) {        event.stopPropagation();        startY = event.touches[0].pageY;      });      $('.page').on('touchmove', function(event) {        event.stopPropagation();        var endY = event.changedTouches[0].pageY;        var changedY = endY - startY;        var scroll_top = $('.page').scrollTop();　　　　　　　　　 // 判断是否在顶部，且向下拖动        if (scroll_top === 0 && changedY > 0) {          event.preventDefault();        }　　　　　　　　　 // 判断是否在底部，且向上拖动        var o = $('.bottom').offset();        if (o.top + o.height === box_height && changedY < 0) {          event.preventDefault();        }      });　　　　　　　// header禁止拖动      $('.header').on('touchmove', function(event) {        event.preventDefault();      });    });

*{  padding: 0;  margin: 0;}#container{  position: absolute;  left: 0;  top: 0;  right: 0;  bottom: 0;  background-color: #efefef;  color: #fff;  text-align: center;  font-size: 40px;}.header{  position: absolute;  left: 0;  right: 0;  height: 80px;  line-height: 80px;  background-color: #ddd;}.page{  position: absolute;  left: 0;  right: 0;  bottom: 0;  top: 80px;  background-color: #ccc;  overflow-y: auto;  -webkit-overflow-scrolling: touch;}.page > *{  z-index: 1;}.box{  width: 100%;  height: 300px;  line-height: 300px;  box-sizing: border-box;  border-bottom: 2px solid #fff;}