iT邦幫忙

0

jquery 的 body on click 在手機瀏覽器失效?

// step 1
$('body').on('click', '.mobile-all-btn', function(e) {
        $(this).removeClass('mobile-all-btn').addClass('un-mobile-all-btn');
        // do
    });
// step 2
$('body').on('click', '.un-mobile-all-btn', function(e) {
        $(this).removeClass('un-mobile-all-btn').addClass('mobile-all-btn');
        // do
    });

這個在電腦上的瀏覽器可以運行
用谷歌的檢查去模擬手機,也可以運行⋯⋯
但是手機的瀏覽器(safari)卻無法運行?點了沒有預期的反應,step 1 就失效了
這是為什麼呢?
jquery 3.4.1

看更多先前的討論...收起先前的討論...
ccutmis iT邦高手 4 級 ‧ 2019-10-25 12:40:13 檢舉
try 'touchstart' or 'touch'
https://stackoverflow.com/questions/11397028/document-click-function-for-touch-device
火爆浪子 iT邦研究生 1 級 ‧ 2019-10-25 12:45:21 檢舉
touch 沒反應
touchstart 有點怪,我點的之後確實變成 un-mobile-all-btn,但我放開時又回去 mobile-all-btn⋯⋯
小魚 iT邦大師 1 級 ‧ 2019-10-25 13:18:58 檢舉
你有在電腦的Safari瀏覽器上測試嗎?
火爆浪子 iT邦研究生 1 級 ‧ 2019-10-25 13:20:04 檢舉
有,也正常可以用
電腦版上的 Safari瀏覽器 ,是測不準的。
最多就是有問題可以查出來。但就算他是正常的。也不代表在ios上就一定是正常。
1
咖咖拉
iT邦研究生 3 級 ‧ 2019-10-25 13:02:46
最佳解答

這樣寫 手機可以觸發 沒問題
https://codepen.io/ipphof/pen/WNNjgLB

點不到應該是被其他DIV擋住了

簡單的測試 給
un-mobile-all-btn
mobile-all-btn
下一個CSS

    position: relative;
    z-index: 999999;

手機看能不能按到

看更多先前的回應...收起先前的回應...
火爆浪子 iT邦研究生 1 級 ‧ 2019-10-25 13:23:07 檢舉

我的是 table
寫得很爛就是了

火爆浪子 iT邦研究生 1 級 ‧ 2019-10-25 13:24:05 檢舉

https://github.com/asys0512/q1
index-mobile.html
電腦瀏覽時「全選」「上午」「下午」是可以正常運行
但是當手機瀏覽時,這三個按鈕完全失效
詭異的是 th-btntime-btn 是手機跟電腦都有用到,在 choose-common.js
在手機上這兩個 class 卻可以運行⋯⋯這兩個事件是一樣的

咖咖拉 iT邦研究生 3 級 ‧ 2019-10-25 14:01:34 檢舉

https://ithelp.ithome.com.tw/upload/images/20191025/2011029227DQKH4QLM.jpg

https://ithelp.ithome.com.tw/upload/images/20191025/20110292hC4EGxlx0B.jpg

我測試是可以點的耶/images/emoticon/emoticon04.gif safari

你..的..暫存?

火爆浪子 iT邦研究生 1 級 ‧ 2019-10-25 15:55:26 檢舉

我從早上到現在,緩存也太久,還是不能點⋯⋯詭異

火爆浪子 iT邦研究生 1 級 ‧ 2019-10-25 15:56:02 檢舉

我用隱私模式也是一樣不行點耶,你的竟然可以

0

將 $('body')直接改成 $(document)
試試。

看更多先前的回應...收起先前的回應...
火爆浪子 iT邦研究生 1 級 ‧ 2019-10-25 12:46:28 檢舉

也是一樣呢

火爆浪子 iT邦研究生 1 級 ‧ 2019-10-25 12:49:34 檢舉

奇怪,電腦怎麼樣檢查都是可以運行的呀⋯⋯

先加個alert或console看看是否有觸發事件。
我擔心的是,其實事件有觸發。但css有問題,導致你認為沒做用。

火爆浪子 iT邦研究生 1 級 ‧ 2019-10-25 12:58:01 檢舉

我有確認電腦版一切都是可以運行,css 也沒有問題~我可能丟個程式上來好了,很怪的是我還有其他的一樣的事件(只是不同 css)卻在手機上可以運行?!

先確定是事件沒觸發還是css的問題。將問題根本找出來。然後再對症下藥,不要自已覺得怎麼怎麼就是對的。
像我上面說的就是為了要處理觸發問題。
但如果本來就是有觸發了,結果你一直想要找觸發事件的問題。不是本末倒置了嘛?
畢竟你是在 safari 瀏覽器上才會這樣。所以我突然想到你該不會是css的問題。並不是事件觸發的問題。

電腦板並無法去模擬 ios 系統的情況。所以就算它是正常的。也不代表在ios就會正常。css使用是一門學問。

火爆浪子 iT邦研究生 1 級 ‧ 2019-10-25 13:19:22 檢舉

https://github.com/asys0512/q1
index-mobile.html
電腦瀏覽時「全選」「上午」「下午」是可以正常運行
但是當手機瀏覽時,這三個按鈕完全失效
詭異的是 th-btntime-btn 是手機跟電腦都有用到,在 choose-common.js
在手機上這兩個 class 卻可以運行⋯⋯這兩個事件是一樣的

所以你目前的問題是事件沒觸發??
不要再管電腦正常運行的事了。你有問題的是手機版的問題。
不知道你一直在說電腦版沒問題在幹啥?

火爆浪子 iT邦研究生 1 級 ‧ 2019-10-25 13:28:18 檢舉

對,在手機上事件沒有觸發

0
firecold
iT邦新手 2 級 ‧ 2019-10-29 10:34:10

點不到的原因就跟冰水大說的差不多
是手機不會focus的關係
用button 比較不會有這個問題
不然就要設定z-index

我要發表回答

立即登入回答