標籤：doc name tor scale set 代碼 解決方案 charset 冒泡
整體代碼<!DOCTYPE html><html><head> <meta charset=utf-8> <meta name=viewport content="width=device-width,initial-scale=1"> <title>vui</title></head><style> #app { width: 100px; height: 100px; position: absolute; left: 0; top: 0; z-index: 2; background-color: red; } .dow { width: 300px; height: 300px; position: absolute; left: 0; top: 0; background-color: blue; }</style><body> <div class="dow"> <div id=app> </div> </div> <script > let app = document.querySelector('#app') let dow = document.querySelector('.dow')// app.ontouchstart = function () {// console.log('app click')// } app.addEventListener('touchstart', function (e) { app.style.display = 'none' console.log('app click') e.preventDefault(); e.stopPropagation(); }) dow.addEventListener('click', function () { console.log('dow click') }) // touchstart 事件只能通過dom2方式 （也就是addEventListener傳播）以下這種方式無響應的// dow.ontouchstart = function () {// console.log('dow click')// } </script></body></html>如： 這種情況下 兩個元素都綁定click事件 或者touchstart事件，點擊 app時 事件會冒泡到dow上
<div class="dow"> <div id=app> </div> </div>如： 這種情況下 兩個元素都綁定click事件 或者touchstart事件，點擊 app時 事件不會冒泡
<div id=app> </div> <div class="dow"> </div>總結： 由於body是所有dom的父層級，所以 任何事件都會冒泡到body上
2事件穿透存在前提：產生原因： touchstart 先與click執行
解決方案：
app.addEventListener('touchstart', function (e) { app.style.display = 'none' console.log('app click') //重點 e.preventDefault(); //組織事件預設事件，在事件touchstart時候就組織了繼續往下產生click\touchend事件 e.stopPropagation();//非必須 此方法主要組織冒泡，由於前面結論可知，僅當dom存在嵌套下才會產生冒泡才需要此方法 })"e.preventDefault(); //組織事件預設事件，在事件touchstart時候就組織了繼續往下產生click\touchend事件" 的解釋
<div class="dow"> <div id=app> </div> </div> app.addEventListener('touchstart', function (e) { app.style.display = 'none' console.log('app touchstart') e.preventDefault(); e.stopPropagation(); }) app.addEventListener('touchend', function (e) { console.log('app end') }) app.addEventListener('click', function (e) { console.log('app click') }) dow.addEventListener('touchstart', function () { console.log('dow touchstart') }) dow.addEventListener('click', function () { console.log('dow click') }) dow.addEventListener('touchend', function (e) { console.log('dow touchend') })運行點擊結果
- app touchstart
- app end
- dow touchend
翻譯翻譯
-對頁面點擊一次 會先後產生‘touchstart‘ ----‘touchend‘ ---- ‘click‘事件
我們對 app 綁定了 ‘touchstart‘ ----‘touchend‘ ---- ‘click‘ 並對 touchstart 綁定兩個阻止方法
當我們點擊app時候
產生 touchstart事件 ，由於對事件組織預設事件，所以接下來不會再產生click事件,也不會冒泡
產生 touchend事件 ，
冒泡 touchend事件 到dow上
再次總結移動端事【件穿穿透】問題
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
