Cách làm cho chức năng 'click' của tôi hoạt động với iOS

Question

Tôi có một bộ Div hoạt động như các nút. Các nút này có chức năng jquery click() đơn giản hoạt động trên tất cả các trình duyệt ngoại trừ iOS.

Ví dụ:

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

và

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

    alert('hi'); 

}); 

Tôi không chắc tại sao điều này không hoạt động trên iOS - rõ ràng không có 'click' trong iOS.

Thật không may là tôi không có thiết bị iPhone để tự mình kiểm tra, nhưng tôi nhận được rất nhiều khiếu nại từ khách hàng muốn nhấp vào mọi thứ và không có gì đang xảy ra.

Chìa khóa để làm việc này là gì?

Answer 1

Click ": có nghĩa là khi một mousedown và sự kiện mouseup xảy ra trên cùng một nguyên tố hoặc một phần tử được kích hoạt bằng bàn phím

từ Jquery Bug, có việc xung quanh, Chỉ cần thêm "cursor: pointer" đến CSS của phần tử và sự kiện nhấp chuột. . sẽ làm việc như mong đợi và thậm chí bạn có thể thấy điều này Jquery click on Ios để được giúp đỡ

Answer 2

bạn có thể sử dụng này:

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

giải pháp khác là để thiết lập con trỏ của phần tử đến con trỏ và nó hoạt động với sự kiện trực tiếp và nhấp chuột của jQuery. Đặt nó trong CSS.

Answer 3

Thực ra, câu trả lời được chấp nhận không hoạt động đối với tôi. Tôi đã thử sử dụng "con trỏ: con trỏ", onclick = "" và thậm chí chuyển đổi phần tử thành thẻ liên kết.

Những gì tôi đã làm để làm cho nó hoạt động là để ràng buộc sự kiện touchstart insted của sự kiện nhấp chuột. Để làm cho nó làm việc trên tất cả các nền tảng tôi đã phải đến một ua giả mạo xấu xí như thế này:

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 
}); 

Answer 4

Dựa trên Marek's answer đây là quan điểm của tôi về nó (đó là một chút dọn dẹp):

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

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

Có vẫn còn rất nhiều công việc phía trước cho ngành công nghiệp khi nói đến tiêu chuẩn ...

EDIT:

không làm việc trên Và làm mất điện thoại. Mất một cách tiếp cận cứng nhắc hơn:

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

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

Answer 5

Cũng dựa trên Marek's answer, mà thích ứng sự kiện này với thiết bị để bắn một chức năng, đây là một mã mà buộc phải sa thải một nhấp chuột trên các thiết bị iOS, trong đó có đầu tiên là một touchstart sự kiện:

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

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