touchend事件在Android上无效 [英] touchend event doesn't work on Android

问题描述

我刚刚开始考虑在Android上做一些基本的移动Web开发，并编写一个测试脚本来调查触摸事件。我在android模拟器中运行以下代码，而touchend事件从未被触发。谁能告诉我为什么？

我已经在三个版本的模拟器（1.6,2.1和2.2）中尝试过，所有这三个版本都以相同的方式运行。

提前感谢您能给我的任何帮助。

干杯，
Colm

$ b $编辑 - 我也尝试过使用XUI框架，并有同样的问题，所以我猜我有一个根本的误解，这个东西如何工作......

地图测试

  ; meta name =descriptioncontent =/> 
< meta name =keywordscontent =/> 
< meta name =languagecontent =english/> 
 
< meta name =viewportcontent =minimum-scale = 1.0，
 width =设备宽度，
 height =设备高度，
用户-scalable =无> 
< script type =text / javascript> 
 window.onload = function（）{
 document.body.appendChild（
 document.createTextNode（w：+ screen.width +x+h：+ screen）身高）
）; 
 attachTouchEvents（）; 
} 
函数attachTouchEvents（）{
 console = document.getElementById（console）; 
 var map = document.getElementById（map）; 
 map.addEventListener（'touchstart'，function（event）{
 event.preventDefault（）; 
 var touch = event.touches [0]; 
 document.getElementById（ touchHTML =S $; 
}，false）innerHTML =S：+ touch.pageX ++ touch.pageY; 
 document.getElementById（touchEvent ; 
 
 map.addEventListener（'touchmove'，function（event）{
 event.preventDefault（）; 
 var touch = event.touches [0]; 
文档.getElementById（touchCoord）innerHTML =M：+ touch.pageX ++ touch.pageY; 
 document.getElementById（touchEvent）innerHTML =Touch Move; 
 }，false）; 
 
 map.addEventListener（'touchend'，function（event）{
 var touch = event.touches [0]; 
 document.getElementById（touchCoord）innerHTML = E：+ touch.pageX ++ touch.pageY; 
 document.getElementById（touchEvent）。innerHTML =Touch End; 
 event.preventDefault（）; 
 }，false）; 
 console.innerHTML =附加事件; 
} 
< / script> 
< style type =text / css> 
 html，body {
 height：100％; 
 width：100％; 
 margin：0; 
背景颜色：红色; 
} 
 #map {
 height：300px; 
 width：300px; 
背景颜色：黄色; 
} 
< / style> 
< / head> 
 
< body> 
< div id =map>< / div> 
< div id =touchCoord> Touch Coords< / div> 
< div id =touchEvent> Touch Evnt< / div> 
< div id =console>控制台< / div> 
 
< / body> 
  

解决方案

对于任何人想知道为什么在Android v3和v4（也许也是v2.3）上缺少touchend事件，有一个很长的突出的bug，只是在v4.1（显然）修正了：

http：// code .google.com / p / android / issues / detail？id = 4549

http://code.google.com/p/android/issues/detail?id=19827

要解决这个错误，您必须在touchstart或第一个touchmove事件中调用 preventDefault（）。当然，这样可以防止本地滚动，所以你需要自己重新实现。

I've just started looking at doing some basic mobile web development on the android and an writing a test script to investigate the touch events. I've run the following code in the android emulator, and the touchend event never gets fired. Can anyone tell me why ?

I've tried in three versions of the emulator (1.6, 2.1 and 2.2) and all three behave in the same way.

Thanks in advance for any help you can give me.

Cheers, Colm

EDIT - I've also tried this using the XUI framework and have the same problem so I'm guessing I have a fundamental misunderstanding of how this stuff works ......

Map Test

    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="language" content="english" />

    <meta name="viewport" content="minimum-scale=1.0,
                                   width=device-width,
                                   height=device-height,
                                   user-scalable=no">
    <script type="text/javascript">
        window.onload = function(){
            document.body.appendChild(
                    document.createTextNode("w: " + screen.width + " x " + "h : " +screen.height)
            );
           attachTouchEvents();
        }
        function attachTouchEvents() {
            console = document.getElementById("console");
            var map = document.getElementById("map");
            map.addEventListener ('touchstart', function (event) {
                event.preventDefault();
                var touch = event.touches[0];
                document.getElementById("touchCoord").innerHTML = "S : " + touch.pageX + " " + touch.pageY;
                document.getElementById("touchEvent").innerHTML = "Touch Start";
            }, false);

            map.addEventListener ('touchmove', function (event) {
                event.preventDefault();
                var touch = event.touches[0];
                document.getElementById("touchCoord").innerHTML = "M : " + touch.pageX + " " + touch.pageY;
                document.getElementById("touchEvent").innerHTML = "Touch Move";
            }, false);

            map.addEventListener ('touchend', function (event) {
                var touch = event.touches[0];
                document.getElementById("touchCoord").innerHTML = "E : " + touch.pageX + " " + touch.pageY;
                document.getElementById("touchEvent").innerHTML = "Touch End";
                event.preventDefault();
            }, false);
            console.innerHTML = "event attached";
        }
    </script>
    <style type="text/css">
        html, body {
            height:100%;
            width:100%;
            margin: 0;
            background-color:red;
        }
        #map {
            height: 300px;
            width: 300px;
            background-color:yellow;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <div id="touchCoord">Touch Coords</div>
    <div id="touchEvent">Touch Evnt</div>
    <div id="console">Console</div>

</body>

解决方案

For anyone trying to figure out why touchend events are missing on Android v3 and v4 (maybe also v2.3), there is a long outstanding bug which only just got fixed in v4.1 (apparently):

http://code.google.com/p/android/issues/detail?id=4549

http://code.google.com/p/android/issues/detail?id=19827

To workaround this bug you have to call preventDefault() on either the touchstart or first touchmove event. Of course, this prevents the native scrolling, so you will need to re-implement that yourself.

这篇关于touchend事件在Android上无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！