By

文章目录
  1. 1. 1、测试移动端事件代码
    1. 1.1. 快速点击下的测试结果
    2. 1.2. 点击小结 手机点按触发顺序touch会在mouseEvents之前
    3. 1.3. 2、手指移动测试结果

1、测试移动端事件代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<div id="d" style="width: 100px; height: 100px; border: 1px solid black;">
</div>
<button id="reset">reset</button>
<div id="container"></div>
</body>
<script type="text/javascript">
    $('#reset').bind('click',function(){
        $('#container').empty();
    });
    var startTime;
    var log = function (msg,e) {
        var clientX="clientX ";
        if(msg.match('touchmove')){
            clientX+=(e['targetTouches'][0].clientX+'').substr(0,3);
        }
        var div = $('<div></div>');
        div.html((new Date().getTime()+'').substring(6) + ': ' + (new Date().getTime() - startTime) + ': ' + clientX+msg)
        $('#container').append(div);

    };
    var addListener= function (type,func) {
        var d = document.getElementById('d');
        d.addEventListener(type,func)
    };
    var touchStart = function (e) {
        startTime = new Date().getTime();
        log('touchStart',e);
    };
    var touchMove = function (e) {
        log('touchmove',e);
    };
    var touchEnd = function (e) {
        log('touchEnd',e);

    };
    var mouseDown = function () {
        log('mouseDown');
    };
    var click = function () {
        log('clickend');
    };
    var mouseClick = function () {
        log('mouseClick');
    };
    var mouseUp = function () {
        log('mouseUp');
    };
    var mouseOver = function () {
        log('mouseOver');
    };
    addListener('mousedown', mouseDown);
    addListener('mouseover', mouseOver);
    addListener('click', mouseClick);
    addListener('mouseup', mouseUp);
    addListener('touchstart', touchStart);
    addListener('touchend', touchEnd);
    addListener('click', click);
    addListener('touchmove', touchMove);

快速点击下的测试结果

华为荣耀手机(网页性能超乎预期，点击会在touchEnd后立即执行)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//test1
touchStart 1
touchEnd  74
mouseOver 82
mouseDown 86
mouseUp   93
mouseClick 94
clickEnd 95
//test2
touchStart 1
touchEnd  107
mouseOver 117
mouseDown 121
mouseUp   129
mouseClick 131
clickEnd 133

三星手机(点击事件相比touch大致会有200ms的延迟)

1
2
3
4
5
6
7
8
//test1
touchStart 1
touchEnd  63
mouseOver 258
mouseDown 260
mouseUp   265
mouseClick 271
clickEnd 275

iphone 4s(点击事件相比touch大致会有300ms的延迟,同时mouseover将会劫持后续的click事件)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//测试1
touchStart 1
touchEnd  36
mouseDown 394
mouseUp   404
mouseClick 405
clickEnd 406
touchStart 1
touchEnd  63
mouseDown 251
mouseUp   255
mouseClick 257
clickEnd 259
//测试2
touchStart 1
touchEnd  59
mouseOver 418

iphone 6

1
2
3
4
5
6
7
8
9
10
11
//测试1
touchStart 1
touchEnd  48
mouseOver 412
//测试2
touchStart 1
touchEnd  50
mouseDown 420
mouseUp   428
mouseClick 429
clickEnd 430

点击小结 手机点按触发顺序touch会在mouseEvents之前

2、手指移动测试结果

测试数据暂时不给出，大致的情况是touchmove事件的触发往往和触发click事件互斥

文章目录
  1. 1. 1、测试移动端事件代码
    1. 1.1. 快速点击下的测试结果
    2. 1.2. 点击小结 手机点按触发顺序touch会在mouseEvents之前
    3. 1.3. 2、手指移动测试结果