touchstart jquery trong trình duyệt

Question

Vì touchstart/touchend chưa được hỗ trợ trong hầu hết các trình duyệt trên máy tính để bàn. Làm thế nào tôi có thể tạo ra sự kiện touchstart sẽ được giống như sự kiện mousedown (được hỗ trợ trong tất cả các trình duyệt).

Tôi muốn một cái gì đó như thế này

$('obj').bind('touchstart', function(e){ 
}); 

sẽ được dịch sang

$('obj').bind('mousedown', function(e){ 
}) 

Answer 1

Bạn có thể ràng buộc cả hai cùng một lúc ...

$('obj').bind('touchstart mousedown', function(e){ 
}); 

Nếu bạn muốn mousedown sự kiện tự động cháy touchstart sự kiện (vì vậy bạn chỉ cần liên kết touchstart) sử dụng ...

$(document).bind('mousedown', function(event) { 
    $(event.target).trigger('touchstart'); 
}); 

Lưu ý rằng điều này có nghĩa mousedown sự kiện phải tuyên truyền để document trước khi tùy chỉnh touchstart sự kiện có thể được kích hoạt. Điều này có thể có tác dụng phụ không mong muốn.

Answer 2

Hãy thử một cái gì đó như thế này:

var clickEventType = ((document.ontouchstart!==null)?'click':'touchstart'); 

$('obj').bind(clickEventType, function(e){}); 

Hơn thế nữa, sử dụng .Trên() cho ràng buộc:

$('body').on(clickEventType, 'obj', function(e){}); 

tài liệu kiểm tra này để xem nếu touchstart tồn tại, nếu có, thì sự kiện của bạn là 'touchstart' nếu nó không (hầu hết các trình duyệt trên máy tính để bàn), sau đó nhấp vào 'click'.

Bạn cũng có thể kích hoạt sử dụng các loại cùng một sự kiện:

$('obj').trigger(clickEventType); 

Answer 3

Nó không phải là giải pháp đẹp nhất, nhưng tốt nhất tôi tìm thấy cho đến bây giờ. Sự sụp đổ? Nó chỉ hoạt động sau khi chạm bóng đầu tiên đã xảy ra, do đó bạn không thể sử dụng đồng bộ :(

var isTouch = false; 
$('body').on('touchstart', function() { 
    isTouch = true; 
}); 

Bạn cũng có thể kiểm tra xem trình duyệt hỗ trợ cảm ứng đầu tiên với Modernizr ví dụ.

Hãy nhớ không sử dụng nó trong phạm vi toàn cầu (Bạn cũng có thể thay đổi nó thành modernizr "giống nhau" bằng cách thêm lớp đẳng cấp cảm ứng vào thẻ Html bằng cách thêm sau isTouch = true mã: $('html').addClass('is-touch-device'). Trong trường hợp này, bạn có thể tham chiếu từ mọi nơi (từ css cũng)