2012-05-14 50 views
14

我有一組Div用作按鈕。這些按鈕有一個簡單的jquery click()函數,可用於除iOS以外的所有瀏覽器。如何使我的'點擊'功能與iOS一起工作

例如:

<div class="button">click me</div> 

$('.button').click(function(){ 

    alert('hi'); 

}); 

我不知道爲什麼,這並不iOS上的工作 - 很明顯,沒有 '咔嗒' 的iOS版。

不幸的是我沒有iphone設備來自己測試,但我收到了很多來自我的客戶的抱怨,他們想要點擊事物而沒有發生任何事情。

讓這個工作起作用的關鍵是什麼?

+2

我不知道IOS,但是你的代碼不會爲桌面瀏覽器的用戶無論是工作,如果這些用戶使用鍵盤,但沒有指向裝置(即,沒有鼠標) - 一些用戶做由於選擇,而其他用戶因身體殘疾而死亡。你應該使用''元素(你仍然可以讓它們看起來像你想要的樣子)。如果你有支付客戶的期望iPhone兼容性,那麼你需要得到一個iPhone測試 - 你可以把它寫成業務費用... – nnnnnn

+0

太多的錯過你的問題的細節。如果您使用的是mac,請使用Safari以開發人員模式運行iOS模擬器。順便說一句,你什麼時候將點擊處理程序綁定到.button? ''.ready'被激發後會發生這種情況嗎? –

+0

'click'在iOS中運行良好,您的問題在其他地方。而且nnnnnn是正確的,你也應該看看'

回答

31

Click「:是指當鼠標按下和鼠標鬆開事件發生在相同的元素或元素被鍵盤激活

Jquery Bug,有變通,只需添加"cursor: pointer"到元素的CSS和click事件。 。預期將工作,你甚至可以看到這個Jquery click on Ios求助

+0

令人驚訝的是,這工作! – willdanceforfun

+10

好吧,Android使用其主動性並使「點擊」被視爲觸摸沒有問題。 iOS是新的IE –

1

您可以使用此:

$('button').bind("touchstart", function(){ 
    alert('hi'); 
}); 

另一個解決方案是設置元素的光標指針,它與jQuery直播和點擊事件。將其設置爲CSS。

+10

使用'touchstart'可能會在用戶嘗試滾動時意外觸發點擊 – brettish

4

其實,接受的答案不適合我。 我試過使用「光標:指針」,onclick =「」,甚至將元素轉換爲錨標籤。

我做的工作就是綁定觸發事件insted的click事件。爲了讓所有的平臺,我有工作,到一個醜陋的UA欺騙是這樣的:

var ua = navigator.userAgent, 
event = (ua.match(/iPad/i) || ua.match(/iPhone/)) ? "touchstart" : "click"; 

jQuery("body").on(event, '.clickable_element', function(e) { 
    // do something here 
}); 
+1

完全適合我!雖然沒有使用'jQuery(「body」)重寫了它,並且使用了一點混亂的var名稱而不是'event',但我想後者僅僅是爲了澄清目的。 – cptstarling

+1

這對我來說,謝謝! –

2

基於Marek's answer這是我對(它是一個有點清理):

var ua = navigator.userAgent, 
pickclick = (ua.match(/iPad/i) || ua.match(/iPhone/)) ? "touchstart" : "click"; 

$('.clickable_element').on(pickclick, function(e) { 
    // do something here 
}); 

有仍然有很多提前爲當它涉及到標準的行業工作......

編輯:

沒上,制定出roid電話。採取了更嚴格的方法:

if (document.documentElement.clientWidth > 1025) { pickclick = 'click' } 
if (document.documentElement.clientWidth < 1025) { pickclick = 'touchstart' } 

$('.clickable_element').on(pickclick, function(e) { 
    // do something here 
}); 
1

同樣基於Marek's answer,這適應了事件的設備火災的功能,這裏是強制解僱iOS設備上點擊一個代碼,那裏首先是一個touchstart事件:

var UA = navigator.userAgent, 
iOS = !!(UA.match(/iPad|iPhone/i)); 

if (iOS) { 
    $(document).on('touchstart', function (e) { 
     e.target.click(); 
    }); 
}