Nhấp chuột jQuery - ngăn chặn nhiều nhấp chuột trong điện thoại di động

Question

Tôi đang sử dụng Phonegap để xây dựng ứng dụng iOS/Android của mình - về cơ bản là một điều khiển từ xa có thể mô phỏng một vài phím trên bàn phím máy tính xách tay của tôi. (Để điều khiển phát lại video, v.v.).

Vì trang web của nó, tôi có hình ảnh khi nhấp vào kết nối với máy chủ Java Socket của tôi trên máy tính xách tay của tôi. Vấn đề tôi phải đối mặt là, mỗi khi tôi nhấp vào một nút - chỉ một lần (như nút tạm dừng), tôi thấy nhiều hơn 1 yêu cầu được kích hoạt trong bảng điều khiển java. Nhưng điều này chỉ xảy ra khi tôi nhấp (chạm) trong điện thoại của mình. Khi tôi thử tương tự trong trình duyệt của máy tính xách tay, nó hoạt động như mong đợi (chỉ một yêu cầu).

Tôi đã đi qua một số bài đăng, nơi tư vấn chung là sử dụng 'unbind()' và 'off()', nhưng không có gì có vẻ hiệu quả. Đoạn mã bên dưới.

$("#play").off().on('click',function(){ 
     //alert("Play"); 

    jQuery.ajax({ 
    type: "GET", 
    async: true, 
    url: 'http://'+ip+':10007/function=play?', 
    success: function (msg) 
     { }, 
    error: function (err) 
     { } 
    }); 
}); 

Tôi đã sử dụng thông báo đó để kiểm tra xem sự kiện có được kích hoạt nhiều lần không. Cảnh báo bật lên chỉ một lần, có nghĩa là sự kiện này chỉ được kích hoạt một lần. Vì vậy, chỉ một lần nhấp (chạm) => Một sự kiện => Nhưng nhiều yêu cầu!

Tôi đang kiểm tra phản ứng máy chủ với đoạn mã này:

while(true) {     
     Socket sock = servsock.accept();     
     System.out.println("Connection from: " + sock.getInetAddress());     
     Scanner in = new Scanner(sock.getInputStream());     
     PrintWriter out = new PrintWriter(sock.getOutputStream());     
     String request = "";     
     while (in.hasNext()) { 
      request = in.next();     
      if (request.contains("function=")) 
      { 
      inputLine = request.split("function=")[1]; 
      System.out.println ("^^^^^" + inputLine); 
      ... 

Sản lượng xuất hiện ba lần trong giao diện điều khiển khi có yêu cầu từ điện thoại di động, nhưng chỉ một lần khi có yêu cầu từ trình duyệt máy tính xách tay của tôi.

Tôi không hiểu tại sao và không chắc chắn cách phòng ngừa. Bất kỳ con trỏ nào?

Answer 1

Sử dụng console.log("called") để kiểm tra số lần nút được gọi. Để xem kết quả đầu ra trong chrome nằm dưới chế độ xem-> Developer-> giao diện điều khiển javaScript. alert("Play"); sẽ chỉ chạy một lần.

Answer 2

Có lẽ bạn đã thử các giải pháp này đã được nhưng trong trường hợp bạn chưa,

1. Cố gắng đưa $("#play").off('click'); trong hàm callback (thành công hay đầy đủ) thay vì ~off().on('click')~.

2. Thêm return false; vào cuộc gọi lại.

Answer 3

Tôi đã có một trải nghiệm tương tự với điều này bằng cách sử dụng jQuery trong đó một phương thức được gọi hai lần trong một lần nhấp. Sau đó, tôi nhận ra rằng vấn đề là tôi gọi các sự kiện bên ngoài mã số document.ready của tôi.

Hãy thử các tính năng này. Vì vậy, thay vì phải

$(function(){ 
    ... 
}); 

$("#play").off().on('click',function(){ 
    ... 
}); 

Hãy thử nó theo cách này:

$(function(){ 
    ... 

    $("#play").off().on('click',function(){ 
     ... 
    }); 
}); 

Answer 4

Một cách khác để bạn có thể giải quyết vấn đề này là sử dụng một lá cờ mà bạn có thể thiết lập khi bạn nhấp vào nút. Sau đó bạn có thể kiểm tra giá trị của cờ và trả về false; trong trường hợp giá trị đã được đặt.

// Mã giả
- Giữ cờ thành sai ban đầu.
- Khi nhấp, hãy kiểm tra giá trị cờ.
- Nếu cờ được đặt, trả về false;
- Nếu cờ không được đặt, hãy đặt cờ.
- Khi phương thức thành công được gọi, hãy đặt lại giá trị thành sai.

Điều này sẽ giải quyết vấn đề nhiều cuộc gọi ít nhất. Một bài tập khác sẽ là để xác định tại sao đây chỉ là vấn đề trên một thiết bị.

Answer 5

Một cách bạn có thể kích hoạt sự kiện nhấp một lần là sử dụng .one() thay vì .on(). Điều này sẽ đảm bảo sự kiện được kích hoạt một lần. Sau khi yêu cầu AJAX hoàn tất, bạn có thể thực hiện lại hàm .one().

Mã của bạn sẽ giống như thế:

function processOnce() { 
    //alert("Play"); 

    jQuery.ajax({ 
     type : "GET", 
     async : true, 
     url : 'http://' + ip + ':10007/function=play?', 
     success : function (msg) { 
      $("#play").one('click', processOnce()); 
     }, 
     error : function (err) {} 
    }); 
} 

$("#play").one('click', processOnce()); 

Một giải pháp khả thi là để chờ đợi sự kiện deviceready. Vì vậy trong thẻ cơ thể bạn thêm này:

<body onload="onBodyLoad()"> 

và cho kịch bản:

<script type="text/javascript"> 
    function onBodyLoad() { 
     document.addEventListener("deviceready", onDeviceReady, false); 
    } 

    function onDeviceReady() { 
     $(function() { 
     // bind your elements 
     }); 
    } 

Cuối cùng bạn có thể thêm một lá cờ để xác định xem một nhấp chuột đã xảy ra trước đó. Vì vậy, mã của bạn sẽ trông như thế này:

var clicked = false; 

$("#play").on('click', function() { 
    if (clicked) 
     return; 

    clicked = true; 
    //alert("Play"); 

    jQuery.ajax({ 
     type : "GET", 
     async : true, 
     url : 'http://' + ip + ':10007/function=play?', 
     success : function (msg) { 
      clicked = false; 
     }, 
     error : function (err) {} 
    }); 
}); 

Tôi hy vọng điều này sẽ giúp.