11
votes

Suspendre l'événement par défaut dans JQuery

J'essaie de retarder l'événement ou les événements par défaut dans un script JQuery. Le contexte est que je souhaite afficher un message aux utilisateurs lorsqu'ils effectuent certaines actions (cliquez principalement) pendant quelques secondes avant que l'action par défaut incendie.

pseudo-code: - Utilisateur clique sur lien / bouton / élément - L'utilisateur obtient un message contextuel indiquant "Vous quittez le site" - Le message reste à l'écran pour x millisecondes - action par défaut (peut être autre que le lien href aussi) incendies

jusqu'à présent, mes tentatives ressemblent à ceci: xxx

bien sûr, cela ne " t Travailler comme prévu, mais peut montrer ce que j'essaie de faire.

Je ne suis pas en mesure d'utiliser des plug-instances comme un environnement hébergé sans accès en ligne.

Des idées?


0 commentaires

4 Réponses :


-2
votes

Cela pourrait fonctionner: xxx

Remarque: totalement non testé


3 commentaires

Cela ne ferait-il pas la même chose du gestionnaire de clic, y compris le event.preventDefault ?


Il ne fonctionnera pas comme ce contexte sera la fenêtre et non l'ancre


Besoin de faire une référence à l'ancre et d'utiliser cela à l'intérieur du Settimeout. Cependant, oui, cela entraînerait une boucle infinie. Vous auriez besoin d'engourner l'événement de clic afin de ne pas exécuter.



6
votes

Je ferais probablement quelque chose comme ça.

$(document).ready(function() {
  var slept = false;
  $("a").click(function(event) {
    if(!slept) {
        event.preventDefault();
        doStuff(this);

        var $element = $(this);
        // allows us to access this object from inside the function

        setTimeout(function() {
          hideMessage();
          slept = true;
          $element.click(); //triggers the click event with slept = true
        }, 1000);
        // if we triggered the click event here, it would loop through
        // this function recursively until slept was false. we don't want that.
    } else {
        slept = false; //re-initialize
    }
  });
});


1 commentaires

Le problème avec cette approche est que je ne sais pas si l'action initiale est d'aller à une URL. Ce peut être une autre fonction JavaScript qui n'a rien à voir avec la navigation du tout.



2
votes

Quelque chose comme ça devrait faire l'affaire. Ajoutez une nouvelle classe (probablement avec un nom plus sensible que celui que j'ai choisi) à tous les liens que vous souhaitez affecter. Supprimer cette classe lorsque vous avez montré votre popup, alors lorsque vous appelez .Cliquez à nouveau votre code () votre code ne fonctionnera plus et le comportement par défaut se produira.

$("a").addClass("fancy-schmancy-popup-thing-not-yet-shown").click(function() {
    if ($(this).hasClass("fancy-schmancy-popup-thing-not-yet-shown"))
        return true;

    doStuff();
    $(this).removeClass("fancy-schmancy-popup-thing-not-yet-shown");

    var link = this;
    setTimeout(function() {
      hideMessage();
      $(link).click().addClass("fancy-schmancy-popup-thing-not-yet-shown";
    }, 1000);

    return false;
});


2 commentaires

Je ne vois toujours pas comment cela préservera l'événement original de quelque manière que ce soit. Suis-je missionnaire quelque chose?


L'appel ultérieur à $ (link) .Cliquez sur () se comportera comme si l'utilisateur a cliqué sur le lien en question. Votre gestionnaire d'événements pour cet événement de clic sera bien sûr exécuté à nouveau, mais cette fois, le lien ne transportera plus cette classe, de sorte que votre gestionnaire d'événements reviendra simplement. Chaque fois qu'un gestionnaire d'événements revient vrai, le navigateur continuera d'effectuer d'autres actions associées à l'événement, y compris le comportement d'origine (par défaut) (par exemple, allant à une nouvelle page).



3
votes

Probablement la meilleure façon de le faire est d'utiliser un engoufflement. Quelque chose comme: xxx


1 commentaires

Vous utilisez le DOM "Ceci" pour débranchir, ce code devrait être: si (type d'événement == 'non défini') {retourne vrai; } $ (ceci) .unbind (événement); ceci.click ()