a標籤是如何被觸發跳轉的

在統計按鈕點擊跳轉次數時，給按鈕綁定了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);
    });
}

測試結果:

問題二、問題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標籤跳轉。