Hành vi nút chạm phù hợp cho MobileSafari

Question

MobileSafari dưới dạng quy tắc có hành vi nút HTML không đúng (ý nghĩa không chính xác: "không giống như nút gốc iOS"). hành vi nút đúng là như sau:

• tài chạm nút: Nút nổi bật
• tài kéo ngón tay ra khỏi nút: Nút mờ
• tài kéo ngón tay trở lại vào nút: Nút nổi bật
• tài kéo ngón tay ra của nút và bản phát hành: Nút không nhấp vào

Nút MobileSafari tô sáng khi bạn chạm vào chúng, vẫn được tô sáng bất kể vấn đề gì bạn di chuyển và nhấp vào bất kể bạn giải phóng chúng ở đâu (trừ khi chế độ xem cuộn, trong trường hợp đó chạm luôn bị hủy, ngay cả khi bạn nhập lại nút).

Sự cố này áp dụng cho tất cả những thứ có thể nhấp như liên kết (khi -webkit-touch-callout được đặt thành none). Tôi chỉ tìm thấy một ứng dụng web cho đến nay có hành vi nút chính xác: Facebook. Nhìn vào mã của họ cho nó, có vẻ như họ đã thực hiện khá nhiều nhảy qua hoops để làm cho nó hoạt động chính xác (theo dõi tất cả các sự kiện chuột bằng tay và không sử dụng các nút ở tất cả). Mã này dày đặc, sử dụng Javelin, và tôi chưa rõ ràng trên tất cả các phần cần thiết để làm cho nó hoạt động.

Tôi biết tôi đang đùa một mình (vì nếu nó dễ, mọi người sẽ làm điều đó), nhưng tôi sẽ hỏi dù sao đi nữa. Có bất kỳ đoạn mã phổ biến nào có thể xử lý tính năng này không? Có một giải pháp đơn giản hơn so với kỹ thuật đảo ngược Javelin, ngay cả khi nó chỉ áp dụng cho WebKit? Mục tiêu cuối cùng của tôi là hành vi nút chính xác cho một ứng dụng gốc được nhúng trong ứng dụng gốc, vì vậy các giải pháp JavaScript/ObjC lai cũng có thể chấp nhận được (mặc dù không có phương pháp kết hợp nào) .

Answer 1

Về cơ bản những gì bạn muốn làm là xây dựng một số chức năng di chuột lai cho thiết bị cảm ứng, phát hiện khi ngón tay của bạn di chuyển vào/ra khỏi nút được đề cập.

Tôi đã xây dựng một JSFiddle cơ bản, thực hiện một số chức năng của barebones. Nếu bạn biết bất kỳ javascript, tôi nghĩ bạn sẽ có được ý tưởng.

Live JSFiddle DEMO

Hãy thử nó trên thiết bị iOS của bạn (và có thể thiết bị Android của bạn ??).

- brian