Question

我正在使用event.preventDefault，但经过一些检查后，我希望该事件能够继续。

例如，对于

touchmove

事件我正在使用event.preventDefault()，因为我不希望浏览器水平滚动，但在确定滑动方向后，如果方向结果是向上/向下，无论我阻止了什么事，我想要使效果无效。这可能吗？

我的情景

这是我的HTML

<div id="teazer" class="globalTeaser"  ontouchcancel="touchCancel(event);" ontouchmove="touchMove(event);" ontouchend="touchEnd(event,'gTeaser');" ontouchstart="touchStart(event,'teazer');">

这是删除无关部分后的我的js

function touchMove(event) {
        if(fingerCount==1){
            event.preventDefault();
               if ( event.touches.length == 1 ) {
                               curX = event.touches[0].pageX;
                                curY = event.touches[0].pageY;
               } 
               else {
                                touchCancel(event);
                    }
        }else {
            touchCancel(event);
            alert("hi");
}

}

function touchEnd(event,eventType) {

                    //I get the swipe direction here,after some calculations
                    //I get the directions fine,now 
                    //if the swipe direction is up/down whatever event i have prevented in touch move I need to nullify

}

请注意，如果有人要建议window.scrollBy，由于某种原因它不适合我。我很乐意尝试任何其他解决方案。

Answer 1

我不知道您的代码的行为如何，但这是一般原则：

// Keep a reference for last point both events can access
var start;

$( 'body' ).on( {
  // On start, assign the event data to start
  touchstart : function touchStart( touchstartEvent ){
    start = touchstartEvent.touches[ 0 ];
  },
  touchmove  : function touchMove( touchmoveEvent ){
    // The difference between both events positions
    var delta = {};
    // The end event's position
    var end   = touchmoveEvent.touches[ 0 ];

    // Calculate the offset compared to start for this move event
    delata.pageX = start.pageX - end.pageX;
    delata.pageY = start.pageY - end.pageY;

    // If pageX is less than or greater than 0, it means there has been horizontal movement,
    // and this if condition will pass
    if( delta.pageX ){
      touchmoveEvent.preventDefault();
    }
  }
} );

这并不完美，因为在实践中很难创建一个完美的向下或向上滑动 - 即使主要运动向下，我的手指也可能向左或向右移动几个像素。但是你有防止水平运动而不是垂直的问题！在任何情况下，都会说明测试触摸事件的不同属性并且仅在某些条件下防止默认的一般原则。

Answer 2

我的touchMove（）函数已被重写如下

function touchMove（event）{

           if ( event.touches.length == 1 ) {
                           curX = event.touches[0].pageX;
                           curY = event.touches[0].pageY;
                            if(Math.abs((curX-startX))>10){
                                     //default acion is prevented only if the 
                                    //finger count is one and change in  
                                    //x coordinatesis greater than 10 px                                   
                                event.preventDefault();
                            }
           } 
           else {
                            touchCancel(event);
                }
    }

此代码将确保两件事

1）捏缩放不受影响

2）垂直滑动的默认操作不受影响

仅针对左侧滑动/右侧滑动事件阻止默认操作

2 个答案: