Di chuột và sự kiện nhấp trên thiết bị di động

Question

Tôi đang tạo trang web đáp ứng cho cả máy tính để bàn và thiết bị di động. Tôi có một vấn đề với sự kiện di chuột và nhấp chuột mà tôi không chắc chắn cách giải quyết cho người dùng trên thiết bị di động.

Trên trang web, tôi có một hộp (div) được gói trong một liên kết. Trên màn hình, khi người dùng di chuột qua nó, một hộp màu khác với nội dung văn bản sẽ trượt xuống trên hộp đầu tiên. Khi người dùng nhấp vào hộp, liên kết sẽ đưa họ đến trang được chỉ định. Tôi đang sử dụng jQuery cho việc này.

Hiện tại, trên thiết bị di động, khi người dùng nhấn vào hộp, hộp thứ hai sẽ trượt xuống. Nhưng phải mất một lần nhấn thứ hai để thực sự theo liên kết. Công ty mà tôi đang tạo điều này vì đã yêu cầu, trên thiết bị di động, khi người dùng chạm vào một hộp, hộp thứ hai sẽ trượt xuống và sau 2 giây trì hoãn, nó sẽ tự động gửi chúng đến một trang cụ thể. Bằng cách này, người dùng chỉ cần nhấn một lần.

Tôi không chắc chắn cách thực hiện công việc này. Tôi đã nghĩ về việc sử dụng jQuery mobile, nhưng tôi không thể tìm ra cách để bỏ qua lần chạm đầu tiên (thiết bị di động nào xử lý như một sự kiện di chuột) và kích hoạt liên kết thay thế.

Cảm ơn

Answer 1

Tôi đồng ý với @DZittersteyn về thực tế rằng đây là thiết kế kém. Bạn có thể hiển thị tốt hơn nội dung theo mặc định trong thiết bị di động để người nhấp chuột biết những gì anh ta đã nhấp vào.

if(!!('ontouchstart' in window)){//check for touch device 
    $('myElement').unbind('click mouseenter mouseleave'); //use off if you used on, to unbind usual listeners 
    $('myElement').on('click',function(){ 
    //slide down code 
    setTimeout(function(){ 
     window.location.href='asdasd.html'; 
     },2000); 
    }); 
} 

hoặc bạn có thể sử dụng

if(!!('ontouchstart' in window)){//check for touch device 
//behaviour and events for touch device 
} 
else{ 
//behaviour and events for pointing device like mouse 
} 

Answer 2

Hãy thử sử dụng jQuery để lắng nghe những touchstart và touchend sự kiện dành cho điện thoại di động.

EX:

$('selector').bind('touchstart', function(){ 
    //some action 
}); 
$('selector').bind('touchend', function(){ 
    //set timeout and action 
}); 

Hope this helps.

Answer 3

if (('ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch))) { 
    $(".touch") 
     .bind("touchstart", function() { 
      $(this) 
       .addClass("active") 
       .bind("touchend", function() { 
        $(this).removeClass("active"); 
       }); 
     }) 
     .bind("touchenter", function() { 
      $(this) 
       .addClass("hover") 
       .bind("touchleave", function() { 
        $(this).removeClass("hover active"); 
       }); 
     }); 
}