Je veux empêcher le comportement par défaut d'un lien (a) puis faire le comportement par défaut, disons ouvrir ouvrir un lien dans une nouvelle fenêtre.

Voici du code HTML:

<a href="somewhere" target="_blank" id="mylink">

Et le code JS:

document.getElementById('mylink').addEventListener('click', function (e) {
    e.preventDefault();
    axios.post('options', new FormData(document.querySelector('#myform')))
         .then(function(){ 
             // Here I want to do what the link should have done!
         });
});

Je sais que je peux faire quelque chose comme ça:

window.open(e.target.href);

Mais ce n'est pas une option car le navigateur considère cela comme une popup. Et je ne veux pas réécrire quelque chose dans JS, considérez simplement le lien comme d'habitude: ce lien doit faire son comportement par défaut (qui a été empêché).

Y a-t-il un moyen de faire cela?

-1
rap-2-h 23 mai 2018 à 15:53

3 réponses

Meilleure réponse

Voici une idée:

var openingPopup = false;
document.getElementById('mylink').addEventListener('click', function (e) {
    if(!openingPopup){
        e.preventDefault();
        axios.post('options', new FormData(document.querySelector('#myform')))
            .then(function(){ 
                // make sure this would not run twice
                openingPopup = true;
                document.getElementById('mylink').click();
            });
    }else{
        // skipping this only for one time
        openingPopup = false; 
    }
});

Par ici,

  1. vous exécutez le gestionnaire de clics de l'ouvre-fenêtre une fois,
  2. puis empêcher les autres,
  3. déclencher à nouveau l'événement de clic manuellement,
  4. cette fois, ne faites rien, mais laissez les autres courir.
0
Taha Paksu 23 mai 2018 à 13:02

Selon le lien suggéré par @ Electrox-Qui-Mortem, après avoir terminé votre ou vos pré-processus, vous pouvez supprimer l'écouteur d'événements et appeler à nouveau le clic.

(lien MDN pertinent: https://developer.mozilla.org / en-US / docs / Web / API / EventTarget / removeEventListener)

const anchor = document.getElementById('anchor');

anchor.addEventListener('click', test);

function test(e){
  e.preventDefault();
  alert('test');
  if( true ){
    console.log( this );
    this.removeEventListener('click', test);
    this.click();
  }
}
<a id="anchor" href="https://www.google.com">Test</a>

Il a des performances loufoques dans les outils de test de code (comme JSfiddle et CodePen) - vous devrez le tester dans votre application réelle pour vous assurer qu'il fonctionne correctement pour votre cas d'utilisation.

Je n'ai obtenu de bons résultats qu'avec removeEventListener lorsque je fais référence à une fonction externe en tant que fonction "écouteur". Dans ce cas, test()

0
Doug 23 mai 2018 à 13:11

De manière plus "native", vous pouvez créer un nouvel événement "click" qui n'est pas annulable et le déclencher contre le même élément.

var anchor = document.querySelector('#target');

function triggerClick(target) {
  var newClick = new MouseEvent('click', {
    view: window,
    bubbles: true,
    cancelable: false
  });
  
  target.dispatchEvent(newClick);
}

anchor.addEventListener('click', function(e) {
  e.preventDefault();
  
  if(e.defaultPrevented) {
    alert('Prevented!');
    triggerClick(anchor);
  }
  else {
    alert('Not prevented');
  }
});
<a href="https://google.com" target="_blank" id="target">Click me!</a>

Ici, la clé est le cancelable: false dans le nouvel événement créé dans la fonction triggerClick(target), qui contourne le e.preventDefault().

Dans l'exemple intégré sur StackOverflow, cela ne fonctionne pas, mais voici un JSFiddle!

0
dgopsq 23 mai 2018 à 13:30