摘要:下的點擊事件失效解決方法問題描述當委托給一個元素添加事件時,如果事件是委托到或上,并且委托的元素是默認不可點擊的如等,此時事件會失效。
iOS下的點擊事件失效解決方法 問題描述
當委托給一個元素添加click事件時,如果事件是委托到 document 或 body 上,并且委托的元素是默認不可點擊的(如 div, span 等),此時 click 事件會失效。
demo:
點擊我!
解決辦法有6種:
將 click 事件直接綁定到目標元素(即 .target ) 上
給目標元素添加一個空的 onclick=""(
把 click 改成 touchend 或 touchstart(注意加上preventDefault)
將 click 元素委托到非 document 或 body 的父級元素上
給目標元素加一條樣式規則 cursor: pointer; (cursor: pointer; -webkit-tap-highlight-color: transparent;)
推薦后兩種。推測在 Safari 中,不可點擊元素的點擊事件是不會冒泡到父級元素的。通過添加 cursor: pointer; 使得元素變成了可點擊的了。
補充 問題iOS系統 input 及 input內元素 cursor: pointer; 失效,使得在 iOS系統 上需要借助 cursor 屬性才能生效的 click 事件無法觸發
解決辦法設置 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
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/82735.html
摘要:隨著移動互聯網的發展,移動已經逐漸成為互聯網的主要入口,隨之而來的是前端在移動開發上面臨的各種機遇與挑戰,本文就一些常見移動端問題對移動開發需要注意的事項進行一下總結,必然不可能涉及方方面面,但會隨著筆者的積累持續更新。 隨著移動互聯網的發展,移動Web已經逐漸成為互聯網的主要入口,隨之而來的是前端在移動Web開發上面臨的各種機遇與挑戰,本文就一些常見移動端問題對移動Web開發需要注意...
摘要:隨著移動互聯網的發展,移動已經逐漸成為互聯網的主要入口,隨之而來的是前端在移動開發上面臨的各種機遇與挑戰,本文就一些常見移動端問題對移動開發需要注意的事項進行一下總結,必然不可能涉及方方面面,但會隨著筆者的積累持續更新。 隨著移動互聯網的發展,移動Web已經逐漸成為互聯網的主要入口,隨之而來的是前端在移動Web開發上面臨的各種機遇與挑戰,本文就一些常見移動端問題對移動Web開發需要注意...
摘要:問題描述當使用委托給一個元素添加事件時,如果事件是委托到或上,并且委托的元素是默認不可點擊的如等,此時事件會失效。從解決辦法來看,推測在中,不可點擊的元素的點擊事件不會冒泡到父級元素。 問題描述 當使用委托給一個元素添加click事件時,如果事件是委托到 document 或 body 上,并且委托的元素是默認不可點擊的(如 div, span 等),此時 click 事件會失效。 可...
摘要:二按照官方的提示解決了意思就是切到分支,自己的分支解決沖突,提交。這是和二相反向的操作頁面標題無效的解決辦法強類型轉換的坑條件用正則返回的布爾值結果返回了條件結果也返回了。 2018/3/2 1,vue的{{}}怎么失效了項目使用了twig模板渲染 語法{{}}沖突,使用v-text v-html渲染 可以寫表達式的寫法 字符+變量 2,函數防抖節流封裝實用的下拉加載更多代碼demo...
閱讀 3870·2021-09-10 11:22
閱讀 2325·2021-09-03 10:30
閱讀 3660·2019-08-30 15:55
閱讀 1873·2019-08-30 15:44
閱讀 840·2019-08-30 15:44
閱讀 582·2019-08-30 14:04
閱讀 3042·2019-08-29 17:18
閱讀 1262·2019-08-29 15:04