2013-06-12 34 views
17

Ok, tôi khá mới phát triển web cho nền tảng di động/máy tính bảng. Tôi khá tự tin trong việc phát triển môi trường trình duyệt.sự kiện nhấp chuột jquery cho máy tính bảng và điện thoại màn hình cảm ứng

Vấn đề của tôi là Tôi không sở hữu bất kỳ máy tính bảng nào (Tôi nghèo vì vậy phải bay mù) vì vậy thật khó để tôi thử nghiệm. Tôi cũng khá lo lắng về các sự kiện nhấp chuột không hoạt động đúng cách.

Làm cách nào để đảm bảo rằng các sự kiện nhấp chuột và sự kiện jquery được thực hiện chính xác trên máy tính bảng/điện thoại thông minh chính xác?

Có sự đồng thuận nào về thực tiễn tốt nhất cho các sự kiện nhấp và máy tính bảng/điện thoại thông minh không?

Lưu ý: Tôi không phát triển trang web chỉ dành cho thiết bị di động - trang web chuyển đổi hình dạng cho thiết bị di động.

+4

Bạn có thể sử dụng điều này: '$ (phần tử) .on ('clickstart click', function() {...});'. – Joe

+0

Trình mô phỏng trợ giúp? http://www.webdesignerdepot.com/2012/11/6-free-mobile-device-emulators-for-testing-your-site/ – WeaklyTyped

+0

@Joe tôi có cùng một vấn đề onclick không hoạt động trên máy tính bảng, nếu sử dụng .on và in một cái gì đó sau đó nó works.alert tôi đã cố gắng replcing với cosole.log nhưng onclick không làm việc với rằng – anam

Trả lời

20

Trình duyệt trên thiết bị di động sẽ vẫn phản hồi các sự kiện nhấp chuột, mặc dù chúng sẽ giới thiệu độ trễ (thường là khoảng 300 mili giây). Nếu bạn muốn có trải nghiệm đáp ứng nhanh hơn, bạn có thể thử phát hiện xem bạn có đang sử dụng nền tảng di động hay không và sử dụng các sự kiện touchstart hoặc touchend. Tôi tìm thấy touchend thường là một trải nghiệm tốt hơn, chủ yếu là do bàn tay của người dùng vẫn đang trong quá trình phát hiện khi touchstart kích hoạt.

Something như thế này:

$(element).on(isMobile ? 'touchend' : 'click', function(e) {...});

Hoặc bạn có thể sử dụng hammer.js, mà sẽ làm việc cho cả hai máy tính để bàn và di động.

Để thử nghiệm, bạn có thể đọc qua câu trả lời cho câu hỏi Stackoverflow này: Simulating touch events on a PC browser.

Các vấn đề liên quan