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

<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也會有同樣的問題。

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的讲解ontouchstart、ontouchend、onclick区别和坑点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。