IT工程師數位筆記本

今天要講的這個并不復雜，我用一個例子來講解吧

<div id="box"></div>
var box = document.querySelector("#box");
box.addEventListener("click",function(){
    console.log("click");
});
box.addEventListener("touchstart",function(){
    console.log("touchstart");
});
box.addEventListener("touchend",function(){
    console.log("touchend");
});

我們先來看一下ontouchstart、ontouchend、onclick這三個方法的執行順序。

可以看到它們的執行順序是ontouchstart > ontouchend > onclick

除了執行順序不同以外，還有一個非常大的區別那就是onclick只在你快速點擊并放開才會被執行，如果你點擊一個區域，很遲才放開，那么onclick是不會執行的，如下圖就是我點擊div兩秒以后松開的結果。

從上圖可以看到它并沒有輸出click，其實我們移動端滑動時，也是不會觸發click事件的，這也是ontouchstart、ontouchend和onclick最大區別吧。

下面來來說說它們的坑點

在項目中，有這么一個需求一個a標簽中還需求再套一個a標簽，顯然這實現不了，于是我將里面的a換成了其他標簽，并給這個標簽自定義了一個屬性data-href，當點擊這個元素時通過location.href跳轉，但當我去測試時，發現一個問題，我上下滑動的時候，結果跳地址了。

導致滑動跳地址的原因就出現在，我是給那個元素添加的ontouchend事件，而ontouchend事件在你滑動結束后是會被觸發的，也許你會想，用onclick不就行了，我何嘗不想用onclick，沒用onclick也是有原因的，它有點透問題，比如下面這段代碼

<a href="//www.taobao.com">
    <div>無效</div>
    <p id="link">跳到baidu</p>
</a>
var link = document.querySelector("#link");
link.addEventListener("click",function(event){
    location.href = "//www.baidu.com";
});

按理說我點擊p元素應該跳到百度才對，但是它卻跳到了淘寶，如下圖。

也許你會覺得它是事件冒泡導致的，我們不妨將代碼改造一下

link.addEventListener("click",function(event){
    event.stopPropagation();
    location.href = "//www.baidu.com";
});

結果它還是跳到了淘寶，如下圖

也就是說，它并不是真的因為事件冒泡導致的，網上說是因為click延時觸發導致的，可能是這樣的，因為click的延時，導致事件在沒觸發之前，就已經傳遞給了a標簽，至于為什么被傳遞的這個事件先被執行，就不得而知了。

解決這個問題倒也簡單，阻止瀏覽器默認事件就可以了，代碼如下

link.addEventListener("click",function(event){
    event.preventDefault();
    location.href = "//www.baidu.com";
});

效果如下

其實不只是click有這個問題，ontouchend也會有同樣的問題。