摘要:下的點(diǎn)擊事件失效解決方法問題描述當(dāng)委托給一個元素添加事件時,如果事件是委托到或上,并且委托的元素是默認(rèn)不可點(diǎn)擊的如等,此時事件會失效。
iOS下的點(diǎn)擊事件失效解決方法 問題描述
當(dāng)委托給一個元素添加click事件時,如果事件是委托到 document 或 body 上,并且委托的元素是默認(rèn)不可點(diǎn)擊的(如 div, span 等),此時 click 事件會失效。
demo:
點(diǎn)擊我!
解決辦法有6種:
將 click 事件直接綁定到目標(biāo)元素(即 .target ) 上
將目標(biāo)元素?fù)Q成 或者 等可點(diǎn)擊的元素
給目標(biāo)元素添加一個空的 onclick=""(
把 click 改成 touchend 或 touchstart(注意加上preventDefault)
將 click 元素委托到非 document 或 body 的父級元素上
給目標(biāo)元素加一條樣式規(guī)則 cursor: pointer; (cursor: pointer; -webkit-tap-highlight-color: transparent;)
推薦后兩種。推測在 Safari 中,不可點(diǎn)擊元素的點(diǎn)擊事件是不會冒泡到父級元素的。通過添加 cursor: pointer; 使得元素變成了可點(diǎn)擊的了。
補(bǔ)充 問題iOS系統(tǒng) input 及 input內(nèi)元素 cursor: pointer; 失效,使得在 iOS系統(tǒng) 上需要借助 cursor 屬性才能生效的 click 事件無法觸發(fā)
解決辦法設(shè)置 font-size: 0;
把 click 改成 touchend (注意加上preventDefault)
參考文檔https://github.com/facebook/react/issues/134
http://stackoverflow.com/questions/5421659/html-label-command-doesnt-work-in-iphone-browser/6472181#6472181
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/82735.html
摘要:隨著移動互聯(lián)網(wǎng)的發(fā)展,移動已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口,隨之而來的是前端在移動開發(fā)上面臨的各種機(jī)遇與挑戰(zhàn),本文就一些常見移動端問題對移動開發(fā)需要注意的事項進(jìn)行一下總結(jié),必然不可能涉及方方面面,但會隨著筆者的積累持續(xù)更新。 隨著移動互聯(lián)網(wǎng)的發(fā)展,移動Web已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口,隨之而來的是前端在移動Web開發(fā)上面臨的各種機(jī)遇與挑戰(zhàn),本文就一些常見移動端問題對移動Web開發(fā)需要注意...
摘要:隨著移動互聯(lián)網(wǎng)的發(fā)展,移動已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口,隨之而來的是前端在移動開發(fā)上面臨的各種機(jī)遇與挑戰(zhàn),本文就一些常見移動端問題對移動開發(fā)需要注意的事項進(jìn)行一下總結(jié),必然不可能涉及方方面面,但會隨著筆者的積累持續(xù)更新。 隨著移動互聯(lián)網(wǎng)的發(fā)展,移動Web已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口,隨之而來的是前端在移動Web開發(fā)上面臨的各種機(jī)遇與挑戰(zhàn),本文就一些常見移動端問題對移動Web開發(fā)需要注意...
摘要:問題描述當(dāng)使用委托給一個元素添加事件時,如果事件是委托到或上,并且委托的元素是默認(rèn)不可點(diǎn)擊的如等,此時事件會失效。從解決辦法來看,推測在中,不可點(diǎn)擊的元素的點(diǎn)擊事件不會冒泡到父級元素。 問題描述 當(dāng)使用委托給一個元素添加click事件時,如果事件是委托到 document 或 body 上,并且委托的元素是默認(rèn)不可點(diǎn)擊的(如 div, span 等),此時 click 事件會失效。 可...
摘要:二按照官方的提示解決了意思就是切到分支,自己的分支解決沖突,提交。這是和二相反向的操作頁面標(biāo)題無效的解決辦法強(qiáng)類型轉(zhuǎn)換的坑條件用正則返回的布爾值結(jié)果返回了條件結(jié)果也返回了。 2018/3/2 1,vue的{{}}怎么失效了項目使用了twig模板渲染 語法{{}}沖突,使用v-text v-html渲染 可以寫表達(dá)式的寫法 字符+變量 2,函數(shù)防抖節(jié)流封裝實(shí)用的下拉加載更多代碼demo...
閱讀 3914·2021-09-10 11:22
閱讀 2385·2021-09-03 10:30
閱讀 3699·2019-08-30 15:55
閱讀 1970·2019-08-30 15:44
閱讀 870·2019-08-30 15:44
閱讀 620·2019-08-30 14:04
閱讀 3079·2019-08-29 17:18
閱讀 1300·2019-08-29 15:04