在统计按钮点击跳转次数时，给按钮绑定了touchstart事宜，效果致使统计数据翻了近10倍。后改用click事宜，数据才一般。固有此文。

题目

1. 当我们点击鼠标时，会触发一系列mouse/touch/click事宜，a标签转跳是被什么事宜触发的?

2. PC：在 div1 按下鼠标左键, 在div2 中开释鼠标左键,是不是会触发click事宜?

3. PC：在 div1 按下鼠标左键后，再在统一绑定事宜的节点中挪动鼠标，末了开释鼠标左键。 是不是会触发click事宜?

4. M: 在 div1 触按屏幕, 再在div2 中开释触按,是不是会触发click事宜?

5. M：在 div1 触按屏幕，再在统一绑定事宜的节点中挪动手指，末了移开释触按。是不是会触发click事宜?

晓得以上5个题目的效果的就能够不往下看了。

demo共用一段html

<a id="a" target="_blank" href="http://www.58.com">58</a>
<div class="div1"></div>
<div class="div2"></div>

1. 当我们点击鼠标时，会触发一系列mouse/touch/pointer事宜，a标签转跳是被什么事宜触发的?

var events = 'click touchstart touchend mousedown mouseup'.split(' ');
var n = 0;
var timer = setInterval(function(){
    var event = new Event(events[n]);
    document.getElementById('a').dispatchEvent(event); // 建立一系列事宜，直接在元素节点上触发。
    console.log(event.type);
    n++;
    if (n == events.length) {
        clearInterval(timer);
    }
},2000);

测试效果： a标签跳转 只被 click 事宜触发。

2. PC：在 div1 按下鼠标左键, 在div2 中开释鼠标左键,是不是会触发click事宜?

3.PC：在 div1 按下鼠标左键后，再在统一绑定事宜的节点中挪动鼠标，末了开释鼠标左键。 是不是会触发click事宜?

var events = 'click mousedown mouseup'.split(' ');
var divs = document.getElementsByTagName('div');
var handler = function(e){
    e.preventDefault();
    this.innerHTML +=  ' type:' + e.type + ' target:' + e.target.className + ' this:' + this.className;
};

for (var i=0; i <divs.length; i++) {
    events.forEach(function(event){
        divs[i].addEventListener(event, handler);
    });
}

测试效果:

题目2、题目3，在雷同绑定事宜元素中，按下鼠标左键，纵然挪动也会触发 click 事宜，而在差别元素中不会触发 click 事宜。

在测试题目3的过程当中我们还发明，按下鼠标左键触发的是 div1 绑定的mousedown事宜，开释鼠标左键触发的是 div2 绑定的mouseup事宜。

我们能够如许以为，在点击鼠标左键时，只需在统一元素中先触发mousedown事宜再触发mouseup事宜，click事宜才会被触发，a标签才会转跳

4. M: 在 div1 触按屏幕, 再在div2 中开释触按,是不是会触发click事宜?

5. M：在 div1 触按屏幕，再在统一绑定事宜的节点中挪动手指，末了移开释触按。 是不是会触发click事宜?

var events = 'click touchstart touchend mousedown mouseup'.split(' ');
var divs = document.getElementsByTagName('div');
var handler = function(e){
    e.preventDefault();
    this.innerHTML +=  ' type:' + e.type + ' target:' + e.target.className + ' this:' + this.className;
};

for (var i=0; i <divs.length; i++) {
    events.forEach(function(event){
        divs[i].addEventListener(event, handler); // type:mousedown target:div1 this:div1 | type:mouseup target:div2 this:div2
    });                                           // type:touchstart target:div1 this:div1 | type:touchend target:div1 this:div1
}

测试效果:

题目4，在 div1 触按屏幕, 再在div2 中开释触按，只会触发div1的 touchstart 和 touchend 事宜，不会触发div2的 touchend 事宜，而且不会触发mousedown mouseup click事宜。

题目5，只需挪动了手指，mousedown mouseup click事宜就不被触发。

假如触摸屏幕，这些事宜的触发递次也是很风趣。

touchstart -> touchend -> mousedown -> mouseup -> click。

值得注意的是，touchend在mousedown之前被触发。

总结

a标签跳转只被click事宜触发。
在PC端，点击鼠标左键，纵然在a标签链接上挪动鼠标，也会触发a标签跳转。
在M端，手指触摸屏幕，就会触发a标签跳转，然则假如过程当中手指有挪动，就触发不了a标签跳转。