jquery 仅对左扫/右扫事件阻止默认操作

mlnl4t2r 于 2022-12-18 发布在 jQuery

关注(0)|答案(2)|浏览(137)

我正在使用event.preventDefault，但经过一些检查后，我希望事件继续。
例如，对于
触摸移动
事件我使用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，由于某种原因，它对我不起作用。任何其他的解决方案，我很乐意尝试。

jquery

来源：https://stackoverflow.com/questions/20265370/preventing-the-default-action-only-for-a-left-swipe-right-swipe-event

2条答案

按热度按时间

wqsoz72f1#

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

// 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();
    }
  }
} );

这并不完美，因为在实践中很难创建一个完美的向下或向上滑动-我的手指可能会左右移动几个像素，即使主要的移动是向下的。但这样你就有了防止水平移动而不是垂直移动的问题！无论如何，测试触摸事件的不同属性和只防止特定条件下的默认设置的一般原则是说明。

赞(0）回复(0）举报 2022-12-18

imzjd6km2#

我的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)垂直滑动的默认操作不受影响

赞(0）回复(0）举报 2022-12-18

我来回答

jquery 仅对左扫/右扫事件阻止默认操作

2条答案

相关问题

热门标签

最新问答