标签: touchmove

我建立了一个网络手机游戏,它运行在浏览器(PC/Mobile)上.

我是否需要使用touchmove？

如何像mousemove事件一样运行touchmove事件？

我们正在尝试在我们的iOS网络应用上滚动元素,同时防止窗口本身滚动.我们正在touchmove窗口上捕获事件,以编程方式滚动元素并(尝试)通过调用preventDefault事件来阻止窗口本身滚动.

不幸的是,这在Mobile Safari中不起作用.窗口继续在我们的元素下滚动.问题听起来与https://bugs.webkit.org/show_bug.cgi?id=163207中描述的Webkit错误完全相同,但该问题在iOS 10.3中已得到修复,而我运行的是11.3.

捕获touchforcestart和调用preventDefault似乎确实阻止了窗口的滚动,但是我们正在调用它touchstart,因为窗口仍然滚动,这似乎"太晚了".滚动仅在下次touchstart调用时被阻止.

关于发生了什么的任何想法？我们感到困惑,因为这显然是一个错误,但它似乎已经修复了一段时间.

在移动safari中,在处理touchmove元素的过程中,我改变了className该元素.不幸的是,当用户滚动或直到惯性滚动的最后时,视觉变化不会发生.

我该怎么做才能className立即进行视觉拍摄？

更多:显然,这不仅限于className更改,而是看似对DOM的任何更改,例如innerHTML和style.

我在iPhone上有一个非常大的错误,它使页面无法使用,我无法解决它.我也找不到关于这个问题的任何话题.

我有以下屏幕:

在中间,有一个div,它被设置-webkit-overflow: auto;为在这个div内平滑滚动.滚动工作非常精细和流畅.

但是直到我touchmove在这个div之外的另一个元素上做一个.如果我这样做并尝试再次滚动滚动容器,它就会冻结而根本不会移动.在滚动容器上点击几次后,它再次滚动.它正在丢失滚动容器的滚动焦点并尝试滚动父级.

所以,如果我做这样的运动:

这看起来像这样:

注意:我只是从底部容器移动到溢出div中.释放手指然后再次尝试滚动后,它仍会滚动父div.

我做了一个简短的例子,所以你可以在这里看一下你的iphone /手机.

此问题仅在使用-webkit-overflow: auto正常时出现,overflow: scroll它始终有效但是...您知道这种滚动感觉有多么迟钝.

当您点击/点击容器时,有没有办法强制滚动焦点在所需的容器中-overflow-scrolling: touch;？

我想从ios设备(以后可能是android)访问我的javascript应用程序时添加一些多点触控功能.

我希望提供类似shiftkey的功能:用户可以用一根手指按住屏幕上的按钮,按下此按钮时,屏幕其余部分的点按动作的行为与经典点击略有不同.

我遇到的问题是,我没有收到任何touchend除非对手指敲击事件touchmove被解雇第一手指按住Shift键,按钮.

因为屏幕非常敏感,所以touchmove事件很容易被触发,在大多数情况下一切正常.

但是当用户的手指有点太静止时,直到用户稍微移动他的手指才检测到敲击.这会在敲击和屏幕上发生的动作之间产生可变的"延迟"(如果用户非常平静,则延迟可能会发生变化并持续几秒钟).我的猜测是,这种延迟会导致用户再次点击,从而第二次触发动作,这是我不想要的!

你可以用ipad/iphone在这里测试一下:http://jsfiddle.net/jdeXH/8/

在点击红色div时,将手指静止地放在青色div上,尝试让身体保持绿色几秒钟.

这种行为是期待的吗？这个问题有一些已知的解决方法吗？我本以为当手指从屏幕上移开时,会立即触发touchend事件.

我用iOS 5.1.1测试了这个(ipad1和iphone4s)

编辑:发现一个类似的问题Multitouch touchEvents未在Safari Mobile上触发

我正在构建一些主要用于平板电脑的东西,用户可以点击屏幕上的项目并应用它.这是我到目前为止:

问题:

1. 我想使用触摸事件来删除类并在触摸端添加类(以使其更快).
2. 如果用户滑动(touchmoves),我不希望它做任何事情.

我尝试过很多东西,但都没有.我尝试过的最简单的(失败的)是这样的:

var dragging = false;

$(".items").on("touchmove", function(){
      dragging = true;
});

$('.items').on("click touchend", function(event){
    if (dragging = true){
    }
    else{
    $('.items').removeClass('selected');
    $(this).addClass('selected');
    }
});

使用案例: - 如果用户正在滚动内部div,则一旦达到内部div,它就不应滚动外部div.

如果内部div已经到达结尾,则以下代码可以正常工作.即,在内部div到达结束之后触发touchstart/touchmove事件.

但是如果我不提起触摸并继续滚动,并且如果在此过程中内部div的末端已到达,则它开始滚动外部div.

$('body').find('.scrollableDiv').on(
    {
      'touchstart' :  function(e) {
        touchStartEvent = e;
      },
      'touchmove' : function(e) {
        e.stopImmediatePropagation();
        $this = $(this);
        if ((e.originalEvent.touches[0].pageY > touchStartEvent.originalEvent.touches[0].pageY && this.scrollTop == 0) || 
            (e.originalEvent.touches[0].pageY < touchStartEvent.originalEvent.touches[0].pageY && this.scrollTop + this.offsetHeight >= this.scrollHeight)){
          e.preventDefault();
        }
      },  
  }); 

一旦达到内部div的结尾,我该如何停止滚动？我试图在Android设备上的浏览器上实现这一点.有人可以在这方面帮助我吗？

注意:用户甚至应该能够滚动外部div.

提前致谢.

我需要保持一个元素的滚动偏移量与另一个元素(实际上是窗口)保持同步,并且我在移动Safari(iPad)上滚动的惯性"滚动"阶段遇到了麻烦.

我有几个div,position:fixed; overflow:hidden我需要保持他们的滚动偏移与窗口的一个同步(意味着整个身体滚动.)通常我会像这样(jQuery)编码:

var $win = $(window),
    $div1 = $(...)

$win.scroll(function() { 
    $div1.scrollTop($win.scrollTop())
})

但是在iPad上测试界面时,我注意到在触摸阶段,当你用手指拖动虚拟页面时,也没有在惯性阶段,当你放开并且页面减速到停下来

我通过注册touchmove事件的处理程序以及事件处理程序来解决拖动阶段scroll.

但我找不到解决惯性阶段问题的方法.div保持静止(并且慢慢地与页面的其余部分不同步),直到惯性运动达到完全停止,此时滚动事件最终被触发并且它跳到位置.

这是一个有效的演示.

尝试在iPad上滚动它以查看"惯性晃动"问题.不幸的是,我无法让它在jsFiddle上工作,因为iPad在iframe滚动时出现奇怪的行为.

如果我可以在该阶段进行轮询,我可以保持两个元素之间的同步.我试过了setTimeout,setInterval和requestAnimationFrame,但是在惯性滚动阶段它们都没有发射.似乎所有Javascript都在此阶段停止.

问题:

• 在惯性滚动阶段是否有触发或滚动事件？
• 有没有办法在该阶段运行Javascript回调？
• 有没有办法使用CSS或JS以外的其他技术同步两个元素(X或Y,而不是两者)的滚动偏移？

今天我发生了以下事情:我有一个现有的mousemove事件,touchmove后来又添加了,像这样:

$(window).on "mousemove touchmove", (e) ->
  pos_x = e.pageX
  pos_y = e.pageY

不幸的是,两个变量都undefined在移动设备上

您知道当您使用移动设备并向下滚动具有谷歌地图的网页时.地图变暗并告诉您"用两根手指移动地图".

我想在我的Leaflet地图中实现这一点.Leaflet目前不提供此类功能.

Google将此功能称为手势处理.如果将其设置为"Cooperative",您将获得我刚才描述的效果. https://developers.google.com/maps/documentation/javascript/interaction

很容易检测到正在使用的手指数量并显示消息,如我的代码示例所示.(您需要在移动设备或模拟器上运行此功能才能看到它有效)

如果它是1个手指我取消touchmove事件并显示我的警告.否则,我允许该事件应用于地图.但是我需要弄清楚在我在地图上取消它之后将一个手指触摸事件应用到包含页面的方法.这样用户就可以滚动页面了.

有没有人有任何好的想法如何实现这一目标？我想过使用dispatchEvent将收到的touchmove事件对象直接中继到父文档.例如:document.dispatchEvent(touchmoveevent); 但没有运气.也许有更好的整体方法.

var myMap = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19
}).addTo(myMap);

$("#mapid").on("touchmove", function(e) {
  if (e.touches.length !== 2) {
    $('.mask').fadeIn();
    return false;
  }
});

$("#mapid").on("touchend", function(e) {
  if ($('.mask').is(':visible')) {
    $('.mask').fadeOut();
  }
});

#mapid {
  height: 600px;
}

.mask {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  top: 0;
  left: 0;
  z-index: 400;
}

.message {
  color: #ffffff;
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%; …