資訊專(zhuān)欄INFORMATION COLUMN
摘要：?jiǎn)栴}描述當(dāng)使用委托給一個(gè)元素添加事件時(shí)，如果事件是委托到或上，并且委托的元素是默認(rèn)不可點(diǎn)擊的如等，此時(shí)事件會(huì)失效。從解決辦法來(lái)看，推測(cè)在中，不可點(diǎn)擊的元素的點(diǎn)擊事件不會(huì)冒泡到父級(jí)元素。
問(wèn)題描述
當(dāng)使用委托給一個(gè)元素添加click事件時(shí)，如果事件是委托到 document 或 body 上，并且委托的元素是默認(rèn)不可點(diǎn)擊的（如 div, span 等），此時(shí) click 事件會(huì)失效。
可以使用下面的代碼在 iOS 中進(jìn)行測(cè)試。
iOS click bug test
Click Me!
解決辦法
解決辦法有 4 種可供選擇：
?將 click 事件直接綁定到目標(biāo)?元素（??即 .target）上
將目標(biāo)?元素?fù)Q成 或者 button 等可點(diǎn)擊的?元素
將 click 事件委托到?????非 document 或 body 的??父級(jí)元素上
給?目標(biāo)元素加一條樣式規(guī)則 cursor: pointer;
?推薦后兩種。從解決辦法來(lái)看，?推測(cè)在 safari 中，不可點(diǎn)擊的元素的點(diǎn)擊事件不會(huì)冒泡到父級(jí)元素。通過(guò)添加 cursor: pointer 使得元素變成了可點(diǎn)擊的了。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112970.html
摘要：下的點(diǎn)擊事件失效解決方法問(wèn)題描述當(dāng)委托給一個(gè)元素添加事件時(shí)，如果事件是委托到或上，并且委托的元素是默認(rèn)不可點(diǎn)擊的如等，此時(shí)事件會(huì)失效。 iOS下的點(diǎn)擊事件失效解決方法 問(wèn)題描述 當(dāng)委托給一個(gè)元素添加click事件時(shí)，如果事件是委托到 document 或 body 上，并且委托的元素是默認(rèn)不可點(diǎn)擊的(如 div, span 等)，此時(shí) click 事件會(huì)失效。 demo: ...
摘要：二分析排查一步驟一使用搜索引擎我是在無(wú)意中發(fā)現(xiàn)該問(wèn)題的，當(dāng)時(shí)觀察到的現(xiàn)象是綁定在上的事件有時(shí)會(huì)被觸發(fā)，有時(shí)會(huì)失效。這說(shuō)明并不存在偶爾失效的問(wèn)題。也就是說(shuō)，我需要找到確切的令響應(yīng)事件失效的原因。接下來(lái)的事很簡(jiǎn)單，繼續(xù)搜索事件在頁(yè)面滾動(dòng)后失效。 如果你關(guān)注我應(yīng)該知道，我最近對(duì)PC端頁(yè)面進(jìn)行移動(dòng)適配。在這個(gè)過(guò)程中，為了節(jié)省用戶300ms的時(shí)間，同時(shí)給予用戶更及時(shí)的點(diǎn)擊反饋（這意味著更好的用戶...
摘要：二分析排查一步驟一使用搜索引擎我是在無(wú)意中發(fā)現(xiàn)該問(wèn)題的，當(dāng)時(shí)觀察到的現(xiàn)象是綁定在上的事件有時(shí)會(huì)被觸發(fā)，有時(shí)會(huì)失效。這說(shuō)明并不存在偶爾失效的問(wèn)題。也就是說(shuō)，我需要找到確切的令響應(yīng)事件失效的原因。接下來(lái)的事很簡(jiǎn)單，繼續(xù)搜索事件在頁(yè)面滾動(dòng)后失效。 如果你關(guān)注我應(yīng)該知道，我最近對(duì)PC端頁(yè)面進(jìn)行移動(dòng)適配。在這個(gè)過(guò)程中，為了節(jié)省用戶300ms的時(shí)間，同時(shí)給予用戶更及時(shí)的點(diǎn)擊反饋（這意味著更好的用戶...
摘要：隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，移動(dòng)已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口，隨之而來(lái)的是前端在移動(dòng)開(kāi)發(fā)上面臨的各種機(jī)遇與挑戰(zhàn)，本文就一些常見(jiàn)移動(dòng)端問(wèn)題對(duì)移動(dòng)開(kāi)發(fā)需要注意的事項(xiàng)進(jìn)行一下總結(jié)，必然不可能涉及方方面面，但會(huì)隨著筆者的積累持續(xù)更新。 隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，移動(dòng)Web已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口，隨之而來(lái)的是前端在移動(dòng)Web開(kāi)發(fā)上面臨的各種機(jī)遇與挑戰(zhàn)，本文就一些常見(jiàn)移動(dòng)端問(wèn)題對(duì)移動(dòng)Web開(kāi)發(fā)需要注意...
閱讀 3523·2021-11-25 09:43
閱讀 1281·2021-09-08 09:45
閱讀 2653·2021-09-07 09:59
閱讀 1516·2021-08-09 13:45
閱讀 3369·2019-08-30 15:54
閱讀 705·2019-08-29 18:35
閱讀 523·2019-08-29 17:18
閱讀 1008·2019-08-29 14:10
