How to continue event propagation after cancelling?

Question

When a user clicks a certain link I would like to present them with a confirmation dialog. If they click \"Yes\" I would like to continue the original navigation. One catch:

Answer 1

It could be risky but seems to work at the time of writing at least, we're using it in production.

This is ES6 and React, I have tested and found it working for the below browsers. One bonus is if there is an exception (had a couple during the way making this), it goes to the link like a normal link, but it won't be SPA then ofc.

Desktop:

• Chrome v.76.0.3809.132
• Safari v.12.1.2
• Firefox Quantum v.69.0.1
• Edge 18
• Edge 17
• IE11

Mobile/Tablet:

• Android v.8 Samsung Internet
• Android v.8 Chrome
• Android v.9 Chrome
• iOs11.4 Safari
• iOs12.1 Safari

.

import 'mdn-polyfills/MouseEvent'; // for IE11
import React, { Component } from 'react';
import { Link } from 'react-router-dom';

class ProductListLink extends Component {
  constructor(props) {
    super(props);
    this.realClick = true;

    this.onProductClick = this.onProductClick.bind(this);
  }

  onProductClick = (e) => {
    const { target, nativeEvent } = e;
    const clonedNativeEvent = new MouseEvent('click', nativeEvent);

    if (!this.realClick) {
      this.realClick = true;
      return;
    }

    e.preventDefault();
    e.stopPropagation();

    // @todo what you want before the link is acted on here

    this.realClick = false;
    target.dispatchEvent(clonedNativeEvent);
  };

  render() {
     this.onProductClick(e))}
    >
      Lorem
      
  }
}