jQuery appelant cliquez sur l'événement après événement taphold
Je suis le développement d'une application PhoneGap pour Android à l'aide de Jquery et Jquery Mobile.
J'ai une liste d'éléments qui ont besoin de deux événements liés à chaque élément de la liste. J'ai besoin d'un "taphold" de l'événement et un événement "click". Le problème que je vais avoir, c'est quand je fais un "taphold", le bon "taphold" de l'événement est déclenché. Cependant, dès que j'ai de presse, l'événement click est également déclenché. Comment puis-je empêcher l'événement click de tir après un taphold?
Code:
function LoadMyItems(items) {
for(var idx in items)
{
var itemLine = '<div class="my_item" id="my_item_'+items[idx].user_item_id+'">' +
'<img class="item_icon_32" src=./images/graphicFiles/Icon48/'+items[idx].item.graphic.graphicFiles.Icon48.filename+' />' +
items[idx].item.name+
'</div>';
$('#my_list').append('<li>'+itemLine+'</li>');
$('#my_item_'+items[idx].user_item_id).bind('taphold', {userItem:items[idx]},ShowMyItemInfo);
$('#my_item_'+items[idx].user_item_id).bind('click tap', {userItem:items[idx]},FitMyUpgradeItem);
console.log('UserItem '+items[idx].user_item_id+' loaded and events bound');
}
$('#my_items_loader').hide();
myScroll.refresh();
}
Après les conseils ci-dessous, Voici ce que j'ai. Cela fonctionne à l'intérieur de la iScroll objet.
function LoadMyItems(items) {
for(var idx in items)
{
var itemLine = '<div class="my_item" id="my_item_'+items[idx].user_item_id+'">' +
'<img class="item_icon_32" src=./images/graphicFiles/Icon48/'+items[idx].item.graphic.graphicFiles.Icon48.filename+' />' +
items[idx].item.name+
'</div>';
$('#my_list').append('<li>'+itemLine+'</li>');
(function(index) {
var tapTime = 0;
var xPos = 0;
var yPos = 0;
$('#my_item_'+items[index].user_item_id).bind('vmousedown vmouseup', function (event) {
if (event.type == 'vmousedown') {
tapTime = new Date().getTime();
xPos = event.pageX;
yPos = event.pageY;
var timer = setTimeout(function() {
var duration = (new Date().getTime() - tapTime);
var xDiff = Math.abs(mouseXPos - xPos);
var yDiff = Math.abs(mouseYPos - yPos);
if(duration >= 700 && (yDiff <= 40 || mouseXPos == 0))
ShowItemInfo(items[index].item);
},750);
} else {
//event.type == 'vmouseup'
var duration = (new Date().getTime() - tapTime);
var xDiff = Math.abs(event.pageX - xPos);
var yDiff = Math.abs(event.pageY - yPos);
tapTime = new Date().getTime();
if (duration < 699 && yDiff <= 40) {
//this is a tap
FitMyUpgradeItem(items[index]);
}
}
});
$('#my_item_'+items[index].user_item_id).bind('touchmove',function(event) {
event.preventDefault();
});
})(idx);
console.log('UserItem '+items[idx].user_item_id+' loaded and events bound');
}
$('#my_items_loader').hide();
myScroll.refresh();
}
Essayé et testé quick solution: stackoverflow.com/a/11941654/1386781
OriginalL'auteur jasonlg3d | 2012-05-08
Vous devez vous connecter pour publier un commentaire.
Plutôt que d'utiliser
tap
ettaphold
(que j'ai essayé de l'utiliser mais a couru dans les mêmes problèmes, il semble être un problème inhérent à lataphold
événement), vous pouvez utiliservmousedown
et de définir un indicateur, puis lier àvmouseup
à déterminer si c'était untap
ou untaphold
:Pour que cela fonctionne correctement, vous devrez ajouter une IIFE autour de la boucle de code ou de modifier
ShowMyItemInfo(items[idx]);
de travailler sans faire référence à la variable qui change à chaque itération de la boucle. Un facile de créer une IIFE est simplement utiliser$.each()
. Sinon, votre boucle, pourrait ressembler à quelque chose comme ceci:IIFE = Immédiatement Appelée Fonction d'Expression. Elle nous permet de prendre un "instantané" de l'état actuel des variables nous passons dans la IIFE. Alors que nous passons dans
idx
(techniquement le second exemple est la variable qui est passée, et la première occurrence de la variable est disponible à l'intérieur de la IIFE, ce qui pourrait être changé pour quelque chose commeids_new
par souci de simplicité), la valeur transmise est enregistré lorsque letap
gestionnaire d'événement incendies.Mise à jour
Vous pouvez également définir un délai d'expiration pour déterminer
taphold
plutôt que d'utiliser levmouseup
événement:De cette façon, l'événement se déclenche lorsque l'utilisateur tient son doigt pendant trois secondes. Puis le
tap
gestionnaire d'événement se déclenche uniquement si que trois secondes n'a pas eu lieu.J'ai ajouté un exemple de comment faire cela à l'aide d'un délai d'attente pour ne pas prendre l'utilisateur de levage de leur doigt pour les commentaires. Voir le mise à jour pour ma réponse.
Je travaillais sur ce sujet alors que vous étiez. J'ai posté ma solution ci-dessus. J'ai eu à faire quelques trucs supplémentaires pour assurer la iScroll encore défile et n'ai pas couper un taphold événement.
Merci pour la solution parfaite.
J'ai mis en place la mise à jour et il fonctionne très bien. Excellent travail.
OriginalL'auteur Jasper
Tout simplement mis en haut de votre document ou n'importe où avant de définir vos même:
Alors vous pouvez l'utiliser comme ceci:
merci à vous, la meilleure réponse
OriginalL'auteur Behnam Rasooli
Personnellement, je pensais que les réponses ici considérablement compliqué le problème. Si vous voulez juste une méthode simple pour être en mesure de continuer à utiliser le taphold événement et d'ignorer l'événement click qui se déclenche lorsque vous relâchez un taphold, voici comment j'ai résolu ce même problème dans mon propre projet:
Je peux voir comment cela pourrait arriver! Il existe quelques façons je pense à attraper. Peut-être regarder pour les évènements touchstart événement, notez que l'élément commencé, et puis recherchez le correspondant touchend événement et de voir si il est à l'extérieur de l'élément d'origine ou d'un parent.
...ou jQuery mobile devrait mettre en œuvre appuyez sur/taphold correctement de sorte qu'il ne se déclenche pas si vous vous déplacez à l'extérieur de l'élément avant de le relâcher 🙂
OriginalL'auteur Matt Goodwin
Utilisation appuyez sur\vclick et taphold au lieu -- Appuyez sur événement est déclenché deux fois après un taphold.
Dans cet exemple, cliquez sur est en fait pas appelé d'après le taphold .. le Vérifier ici: http://jsfiddle.net/YL8hj/43/
Edit:
aussi http://appcropolis.com/blog/jquery-wrapper-for-iscroll/
crédit https://stackoverflow.com/a/9408567/643500
Ok j'ai essayé jsfiddle lien sur l'appareil, et il ne fonctionne pas correctement. Tous les événements se déclencher dans webview android. C'est donc un problème de périphérique. Je vais devoir trouver une façon différente de la configuration de ces événements...
essayez le jsfiddle nouveau s'il vous plaît. J'ai laissé le robinet, cliquez sur et vclick juste pour montrer la différence.
la js fiddle ne fonctionne toujours pas sur l'appareil. À ce stade, je ne crois pas iScroll a aucune incidence sur la question.
OriginalL'auteur Hitham S. AlQadheeb