如何解决这个关于touchmove与touchstart事件问题

Posted 2023-05-06

参考技术A 1. 结合两者，但做一个标志，这样的函数只触发一次，每100毫秒左右。var flag = false;
$thing.bind('touchstart click', function()
if (!flag)
flag = true;
setTimeout(function() flag = false; , 100);
// do something


return false
);

2. 你可以尝试这样的：var clickEventType=((document.ontouchstart!==null)?'click':'touchstart');
$("#mylink").bind(clickEventType, myClickHandler);

3. 这是我“创造”，并拿出GhostClick和FastClick修复。试试在你自己的，并知道它的工作适合你。$(document).on('touchstart click', '.myBtn' function(event)
event.stopPropagation();
event.preventDefault();
if(event.handled !== true)

// Do your magic

event.handled = true;
else
return false;

);

4. 通常这个工程，以及：$('#buttonId').on('touchstart click', function(e)
e.stopPropagation(); e.preventDefault();
//your code here

);

5. 余由以下方法。 易Peasy ...$(this).bind('touchstart click', function()
e.preventDefault();
//do your stuff here
);

6. 检查快速按键和点击CHOST从谷歌

7. 一般来说，你不想混了默认的触摸和非触摸（点击）API.a旦你进入触摸的世界更容易只与触摸相关的功能处理。下面是伪代码，会做你想要它。 如果你在的TouchMove事件连接和跟踪的位置，您可以添加在doTouchLogic功能更多的项目来检测手势和诸如此类的东西。var touchStartTime;
var touchStartLocation;
var touchEndTime;
var touchEndLocation;

$thing.bind('touchstart'), funcion()
var d = new Date();
touchStartTime = d.getTime();
touchStartLocation = mouse.location(x,y);
);

$thing.bind('touchend'), funcion()
var d = new Date();
touchEndTime= d.getTime();
touchEndLocation= mouse.location(x,y);
doTouchLogic();
);

function doTouchLogic()
var distance = touchEndLocation - touchStartLocation;
var duration = touchEndTime - touchStartTime;

if (duration <= 100ms && distance <= 10px)
// Person tapped their finger (do click/tap stuff here)

if (duration > 100ms && distance <= 10px)
// Person pressed their finger (not a quick tap)

if (duration <= 100ms && distance > 10px)
// Person flicked their finger

if (duration > 100ms && distance > 10px)
// Person dragged their finger



8. 另一个更好的维护。然而，该技术也将做event.stopPropagation（）。点击是没有抓到任何其他的点击为100ms。var clickObject =
flag: false,
isAlreadyClicked: function ()
var wasClicked = clickObject.flag;
clickObject.flag = true;
setTimeout(function () clickObject.flag = false; , 100);
return wasClicked;

;

$("#myButton").bind("click touchstart", function (event)
if (!clickObject.isAlreadyClicked())
...



9. 我写了一个jQuery插件，它提供了一个“touchclick”事件，你可以听。这需要避免被解雇两次都支持双方的点击和touchstart事件时，事件的照顾。

10. 只为目的，这里就是我的最快/最敏感的点击桌面/ TAP解决方案，我能想到的做： 我换成jQuery的on功能与修改一个，只要浏览器支持触摸事件，全部换成我的点击事件与touchstart。$.fn.extend( _on: (function() return $.fn.on; )() );
$.fn.extend(
on: (function()
var isTouchSupported = 'ontouchstart' in window || window.DocumentTouch && document instanceof DocumentTouch;
return function( types, selector, data, fn, one )
if (typeof types == 'string' && isTouchSupported && !(types.match(/touch/gi))) types = types.replace(/click/gi, 'touchstart');
return this._on( types, selector, data, fn);
;
()),
);

用法比将有确切像以前一样：$('#my-button').on('click', function() /* ... */ );

但touchstart时可用，点击时不会。需要的任何种类的任何延误：D

11. 我也工作在android / iPad的Web应用程序，它看来，如果“会连续”，就足以“（无需touchstart）。 。通过禁用touchstart，单击（）;从jQuery的。它的实际工作还没有被touchstart超载。 最后，您可以BINB生活。（“touchstart”功能（E）e.stopPropagation（）;）;要求touchstart事件停止传播，客厅点击（）来获取触发。 它的工作

12. 有很多事情试图解决这一问题时要考虑的。大多数解决方案要么打破滚动或不办理鬼单击事件正常。 对于一个完整的解决方案，请参阅 注意：你不能处理好鬼click事件每个基础。延迟的点击是通过屏幕位置发射，所以如果你的触摸事件修改页面的方式，单击事件将被发送到该页面的新版本。

13. 相反，你一个计数器：var count = 0;
$thing.bind('touchstart click', function()
count++;
if (count %2 == 0) //count 2% gives the remaining counts when devided by 2
// do something


return false
);

14. 它可以有效地分配给该事件'touchstart mousedown'或'touchend mouseup'以避免不希望的副作用click。

15. 考虑一个事实，即点击将始终遵循一个触摸事件的优势，这里是我做的，无需或全局标志摆脱“鬼点击”的。$('#buttonId').on('touchstart click', function(event)
if ($(this).data("already"))
$(this).data("already", false);
return false;
else if (event.type == "touchstart")
$(this).data("already", true);

//your code here
);

基本上，每当ontouchstart上一个标志一组并随后删除（忽略）事件触发，当点击

如何从 IOS Safari 中的 touchmove 事件中检测滚动画布

【中文标题】如何从 IOS Safari 中的 touchmove 事件中检测滚动画布

【英文标题】：How to detect scrolling canvas from touchmove event in IOS safari

【发布时间】：2017-08-26 12:53:24

【问题描述】：

我正在尝试从 touchmove 事件中检测滚动画布，它在除 safari 浏览器之外的所有设备上都可以正常工作，在 safari pageY 中，touchmove 事件的 screenY 坐标无法正常工作。当我触摸并向下移动时，坐标（pageY，screenY）值会波动，这意味着它会像 468,473,470,480,477,486,481，它应该是一致的，增加或减少，以便我可以检测到滚动顶部或向下滚动。请帮帮我。

$scope.touchStart = function(e)
            var touchevent = e.originalEvent.changedTouches[0];
            tempMove = touchevent.screenY;


$scope.touchMove = function(e) 
            var touchevent = e.originalEvent.changedTouches[0];
            var currentY = touchevent.screenY;
            if(tempMove == 0)
                tempMove = currentY;
            else
                var dist = tempMove - currentY;
                window.parent.postMessage(dist,'*');
                tempMove = currentY;
            
        ;

【参考方案1】：

我有一个 css hack 来解决这个问题。我在 touchmove 事件上添加了一个覆盖到画布上，然后它可以轻松滚动。

HTML

     <div id="overlay" ng-show="doubleTapEvent"> <!--  overlay for scroll -->
      <div id="text" > <span class="font-size-15-all" >Scroll up or down</span><br>
        <button class="btn btn_scroll prime_col_white font-size-15-all openSansSemiBold" ng-click="scroll_Off()">
            <span>Back to Label Maker</span>
        </button>
      </div>
    </div><!--  end overlay for scroll -->
   <div class="col-xs-12 col-sm-12 col-md-12  no-padding main_canvas_wrapper" ng-touchmove="touchMove($event)">
     <canvas id="canvasArea"  ></canvas>  
   </div>

控制器

        $scope.touchMove = function(e) 
            e.preventDefault();
            var tObj = canvas.getActiveObject();
            if(!tObj)
                $scope.doubleTapEvent = true;
            
        ;
        $scope.scroll_Off = function()
            $scope.doubleTapEvent = false;