Sende ajax so lange wie tap holded ist - wenn tap nicht gespeichert wird - don 't ajax

Question

Ich passe meine Website tatsächlich an mobile Geräte an und habe ein Problem: Ich verwende für bestimmte Funktionen das Hover-Ereignis als "Trigger". Und jetzt weiß ich nicht, wie man ein Hover-Event in ein Mobile-Frindly-Event umwandeln kann. Ich kenne das Tapphold-Ereignis in meinem Plugin (jQuery Finger), aber das löst nur einmal aus und sagt nicht, wann der Tap angehalten wurde. Ich möchte etwas brauchen:

$("selector").on("as long as tap is hold", function() { 

}); 

Und für einen anderen Fall Id brauchen etwas ähnliches, der einzige Unterschied ist, ich will etwas ähnliches wie „mouseleave“ - nur für mobile Geräte (wenn Benutzer Passt nicht mehr halten) .

Last but not least sollte es auch für delegierte Ereignisse funktionieren.

jQuery:

var myInterval; 
var i = 0; 
var link; 
$(".postimagepic").hover(function() { 
    link = $(this).attr("src"); 
    i = 0; 
    myInterval = setInterval(function() { 
     $.ajax({ 
      url: 'somephp.php', 
      type: 'post', 
      data: { 
       'user':'loooook', 
       'topost':link 
      }, 
      success: function() { 

      } 
     }); 
     i++; 
     if(i == 30) { 
      clearInterval(myInterval); 
     } 
    }, 1000); 
}, function() { //That´s why I need to know when not holding anymore 
    clearInterval(myInterval); 
}); 

Answer 1

jQuery hover() Methode ist nur eine Abkürzung für:

$(selector).mouseenter(handlerIn).mouseleave(handlerOut);

und wiederum beide mouseenter() und mouseleave() Kürzeln sind für

.on(event, handler)

so sollten Sie in der Lage sein, so etwas zu tun:

var myInterval; 
var i = 0; 
var link; 
var postimagepic = $(".postimagepic"); 

var doAjax = function() { 
    link = postimagepic.attr("src"); 
    i = 0; 
    myInterval = setInterval(function() { 
     $.ajax({ 
      url: 'somephp.php', 
      type: 'post', 
      data: { 
       'user':'loooook', 
       'topost':link 
      }, 
      success: function() { 

      } 
     }); 
     i++; 
     if(i == 30) { 
      clearInterval(myInterval); 
     } 
    }, 1000); 
}; 

// handle both touch and mouse events 
postimagepic.on("mouseenter touchstart ontouchstart", doAjax()) 
      .on("mouseleave touchend ontouchend", function() { 
       clearInterval(myInterval); 
      }); 

Seit touchstart und touchend Unterstützung shakey ist, würde ich wie JQuery Mobile mit einer Art von Helfer-Bibliothek vorschlagen, die Ereignisse normalisieren accross alle Browser zur Verfügung stellt.

Answer 2

glaube ich jQuery v1.7 + Zugriff auf diese hat (unter anderem) mobilen Touch-Ereignisse:

tapstart

• , sobald der Benutzer Fired beginnt mit dem Berühren eines Elements (oder klickt auf für Desktopumgebungen).

tapend

• gestartet, nachdem der Benutzer seinen Finger von dem Element freigibt Ziel (oder gibt ihre Maustaste auf Desktops).

taphold

• Dieses Ereignis, wenn der Benutzer Abgriffe ausgelöst wird, und hält an dem Element
  Ziel mindestens 750 Millisekunden.

Sie müssten also beide tapstart und tapend kombinieren. Wenn Sie fragen, ob die Ajax-Anfrage unter tapend beendet werden kann, ist dies nicht möglich. Sobald die Anfrage gemacht wurde, wurde es gemacht. Sie können jedoch im Ajax-Callback überprüfen, ob eine bestimmte Variable auf "Wahr/Falsch" gesetzt ist, was durch das Ereignis tapend festgelegt wird.

Beispiel:

//Flag to be set upon touchend event: 
var touchEnded = false; 

//** Handle TouchStart **// 
$("selector").on('touchstart', function() { 
    //doAjax(callback) 
    callback = function(res) { 
    if (touchEnded) { 
     return false; 
    } else { 
     //do logic 
    } 
    } 
}); 

//** Handle TouchEnd **// 
$("selector").on('touchend', function() { 
    touchEnded = true; 
});