html - 取消注册画布滚动

Question

我有一个带有 kineticjs 的页面，它创建了一个大小为 480*960 的画布，问题是当我在手机上查看它时，我无法滚动到低于画布的位置。

如何取消将触摸事件注册到舞台？

我的代码与此类似：

<div id="container"></div>
<div id="other">other stuff</div>
var stage = new Kinetic.Stage({
    container: 'container',
    width: 480,
    height: 960
  });
  var uploaded;
  var mask;
  var layer = new Kinetic.Layer();
  var imageObj = new Image();
  var maskObj = new Image();
  mask = new Kinetic.Image({
      x: 130,
      y: 50,
      image: maskObj,
      width: newwidth,
      height: newheight
    });
  uploaded = new Kinetic.Image({
      x: 105,
      y: 130,
      image: imageObj,
      width: 160,
      height: 240,
      offset: [95,120],
      draggable: true
    });
  imageObj.onload = function() {
    layer.add(mask);
    layer.add(uploaded);
    stage.add(layer);
    uploaded.on('mouseout', function() {
        document.body.style.cursor = 'default';
      });
    uploaded.on('mouseover', function() {
        document.body.style.cursor = 'pointer';
      });
    mask.on('mouseover', function() {
        document.body.style.cursor = 'default';
      });

  };
imageObj.src = 'pic1.png';
maskObj.src = 'pic2.png';

Answer 1

所以最后我用一个由touchmove触发的简单滚动解决了它

uploaded.on('touchmove',function(e) {
        //still need an action here that would stop scrolling meanwhile the photo is dragged.
      },uploaded.off('touchmove'),mask.on('touchmove',function(e) {
          var currentY = e.touches[0].clientY;
          var currentX = e.touches[0].clientX;
          if(currentY > lastY){
            window.scrollTo(currentX,$(document).scrollTop()-15);
          }else{
            window.scrollTo(currentX,$(document).scrollTop()+15);
          }
             lastY = currentY;
        }));