个人中心
gpt4 book ai didi

iphone - Webkit iphone/ipad 的多点触摸问题

转载 作者：行者123 更新时间：2023-12-03 18:47:37 25 4
gpt4 key购买 nike

在 UIWebView(启用多点触控)中，我得到一个包含两个 div(div1 和 div2)的页面，每个 div 都注册了 touchstart 和 touchend 事件。每次他们收到触摸事件时，我都会转储以下内容:

  • event.touches:包含当前所有触摸
  • 事件.targetTouches:包含与相关的触摸给定目标
  • 事件.changedTouches:包含已触发的触摸事件

考虑以下场景:

  • 点击 div1:event.touches 包含 div1
  • 不释放div1，点击div2:event.touches包含div1和div2
  • 释放 div2 但不释放 div1:event.touches 为空，不应该，因为 div1 仍在被按下。 div1 还收到了 touchend 事件，就好像它已被释放一样
  • 等一会儿，仍然按下div1，它会收到一个新的touchstart事件，这个事件没有意义，因为它从未被释放过。

所以基本上，当释放一根手指时，它的作用就像两根手指都被移除了。我错过了什么吗？

最佳答案

感谢 funkybro 的评论，但不幸的是，在文档级别拦截触摸事件时，我仍然可以观察到相同的错误行为。以下是正在发生的事情的踪迹:

finger 1 touches elem1:
20:44:00.130 onTouchStart: 
    touches len=1 (elem1)
    changedTouches len=1 (elem1)

finger 2 touches elem2 (finger 1 still presses elem1 and has not been released):
20:44:01.066  onTouchStart: 
    touches len=2 (elem1,elem2)
    changedTouches len=1 (elem2)

finger 2 being released (finger 1 still presses elem1 and has not been released):
this is where things begin to go wrong: we receive two touchend events consecutively for
both elem1 and elem2,even though finger 1 is still holding on elem1 and has never released it.
Also the event.touches array is empty for both events, which is wrong since elem1 is still
being pressed.
20:44:08.241  onTouchEnd: touches len=0
              changedTouches len=1 (elem1)

20:44:08.251  onTouchEnd: touches len=0
              changedTouches len=1 (elem2)

after 4 seconds in the same position (finger 1 pressed on elem1, finger 2 released),
we receive a new touchstart event, as if the system wanted to undo the previous mistake
and put things back into a consistent state.   
20:44:12.511  onTouchStart: 
    touches len=1 (elem1)
    changedTouches len=1 (elem1)

now releasing finger 1 from elem1, we receive the touchend event
20:44:14.751  onTouchEnd: 
    touches len=0 
    changedTouches len=1 (elem1)

编辑:以下是一个代码示例，可在 Safari Mobile 上或在设备(而非模拟器)上您自己的 UIWebView 中运行。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Multi-touch test</title>
    <style type="text/css">
        div.square {
            position:absolute;
            width:80px;
            height:80px;
            opacity:0.5;
        }
        div#elem1 {
            left:50px;
            top:50px;
            background-color:red;
        }
        div#elem2 {
            left:200px;
            top:50px;
            background-color:green;
        }
        textarea#logger {
            position:absolute;
            width100%;
            height:70%;
            top:30%;
            background-color:grey;
            color:white;
            overflow: scroll;
        }
    </style>

    <script type="text/javascript">
    function log(text) {
        logger.value = logger.value + text;
        logger.scrollTop = logger.scrollHeight;
    }

    function touchesDumpStr(touches,logPrefix) {
        var str = logPrefix + ', count=' + touches.length + ':';
        for (var i=0; i<touches.length; ++i) {
            if (typeof touches[i].target.customName != 'undefined') {
                str += touches[i].target.customName +' ';
            }
        }
        str += '\n';
        return str;
    }

    function onTouchStart(e) {
        log('onTouchStart\n');
        log(touchesDumpStr(e.touches, 'touches'));
        log(touchesDumpStr(e.targetTouches, 'targetTouches'));
        log(touchesDumpStr(e.changedTouches, 'changedTouches'));
        for (var i=0; i<e.changedTouches.length; ++i) {
            e.changedTouches[i].target.style.opacity=1.0;
        }
        e.preventDefault();
    }

    function onTouchEnd(e) {
        log('onTouchEnd\n');
        log(touchesDumpStr(e.touches, 'touches'));
        log(touchesDumpStr(e.targetTouches, 'targetTouches'));
        log(touchesDumpStr(e.changedTouches, 'changedTouches'));
        for (var i=0; i<e.changedTouches.length; ++i) {
            e.changedTouches[i].target.style.opacity=0.5;
        }
        e.preventDefault();
    }

    var logger;
    function init() {
        logger = document.getElementById('logger');
        document.getElementById('elem1').customName='elem1';
        document.getElementById('elem2').customName='elem2';
        document.addEventListener("touchstart", onTouchStart, false);
        document.addEventListener("touchend", onTouchEnd, false);   
    }
    </script>
</head>
<body onload="init();">
    <div class="square" id="elem1"></div>
    <div class="square" id="elem2"></div>
    <textarea id="logger" rows="10" cols="45" readonly></textarea>
</body>
</html>

关于iphone - Webkit iphone/ipad 的多点触摸问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3695128/

25 4 0
文章推荐： iphone - 为什么 iPhone OS 3.1 上的 NSOperationQueue 会保留长期取消(和释放)的操作？
文章推荐： forms - Delphi-TForm和泛型
文章推荐： wcf - 使用Delphi Client和Windows身份验证访问WCF
文章推荐： iPhone + OSX 面向同一项目
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com