Как продолжить распространение события после отмены?

Ниже приведены фрагменты кода, который, к моему удивлению, действительно работал в Chrome 13.

function handler (evt ) {
    var t = evt.target;
    ...
    setTimeout( function() {
        t.dispatchEvent( evt )
    }, 1000);
    return false;
}

Это не очень кроссбраузерно и, возможно, будет исправлено в будущем, потому что это похоже на угрозу безопасности, имхо.

И я не знаю, что произойдет, если вы отмените распространение события.

Это может быть рискованно, но, похоже, работает, по крайней мере, на момент написания, мы используем его в производстве.

Это ES6 и React, я протестировал и обнаружил, что он работает для следующих браузеров. Один бонус заключается в том, что если есть исключение (была пара во время создания этого), оно переходит к ссылке, как обычная ссылка <a>, но тогда это не будет SPA.

Компьютер:

• Chrome версии 76.0.3809.132
• Сафари v.12.1.2
• Firefox Квант v.69.0.1
• Край 18
• Край 17
• IE11

Мобильный телефон/планшет:

• Android v.8 Самсунг Интернет
• Android v.8 Хром
• Android версии 9 Chrome
• iOS11.4 Сафари
• iOS12.1 Сафари

.

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() {
    <Link
      onClick={(e => this.onProductClick(e))}
    >
      Lorem
    </Link>  
  }
}

Я решил проблему таким образом на одном из моих проектов. Этот пример работает с некоторой базовой обработкой событий, такой как клики и т. д. Обработчик для подтверждения должен быть привязан к первому обработчику.

    // This example assumes clickFunction is first event handled.
    //
    // you have to preserve called function handler to ignore it 
    // when you continue calling.
    //
    // store it in object to preserve function reference     
    var ignoredHandler = {
        fn: false
    };

    // function which will continues processing        
    var go = function(e, el){
        // process href
        var href = $(el).attr('href');
        if (href) {
             window.location = href;
        }

        // process events
        var events = $(el).data('events');

        for (prop in events) {
            if (events.hasOwnProperty(prop)) {
                var event = events[prop];
                $.each(event, function(idx, handler){
                    // do not run for clickFunction
                    if (ignoredHandler.fn != handler.handler) {
                        handler.handler.call(el, e);
                    }
                });
            }
        }
    }

    // click handler
    var clickFunction = function(e){
        e.preventDefault();
        e.stopImmediatePropagation();
        MyApp.confirm("Are you sure you want to navigate away?")
           .done(go.apply(this, e));
    };

    // preserve ignored handler
    ignoredHandler.fn = clickFunction;
    $('.confirmable').click(clickFunction);

    // a little bit longer but it works :)

Если я правильно понимаю проблему, я думаю, вы можете просто обновить событие, чтобы оно было исходным событием в том закрытии, которое у вас есть. Так что просто установите e = e.originalEvent в функции .done.

https://jsfiddle.net/oyetxu54/

MyApp.confirm("confirmation?")
.done(function(){ e = e.originalEvent;})

вот скрипт с другим примером (держите консоль открытой, чтобы вы могли видеть сообщения): это сработало для меня в chrome и firefox

Я решил это:

1. размещение прослушивателя событий на родительском элементе
2. удаление класса из ссылки ТОЛЬКО после того, как пользователь подтвердит
3. повторно щелкнув ссылку после того, как я удалил класс.

function async() {
  var dfd = $.Deferred();
  
  // simulate async
  setTimeout(function () {
    if (confirm('Stackoverflow FTW')) {
      dfd.resolve();
    } else {
      dfd.reject();
    }
  }, 0);
  
  return dfd.promise();
};

$('.container').on('click', '.another-page', function (e) {
  e.stopPropagation();
  e.preventDefault();
  async().done(function () {
    $(e.currentTarget).removeClass('another-page').click();
  });
});

$('body').on('click', function (e) {
  alert('navigating somewhere else woot!')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <a href="#" class="another-page">Somewhere else</a>
</div>

Причина, по которой я добавил прослушиватель событий к родителю, а не к самой ссылке, заключается в том, что событие jQuery on будет привязано к элементу, пока не будет указано иное. Таким образом, даже если элемент не имеет класса another-page, к нему все еще подключен прослушиватель событий, поэтому вам нужно воспользоваться event delegation для решения этой проблемы.

ПОЛУЧИЛА это очень зависит от штата. то есть, если вам нужно спрашивать пользователя КАЖДЫЙ РАЗ, когда он нажимает на ссылку, вам нужно будет добавить второго слушателя, чтобы прочитать класс another-page обратно в ссылку. то есть:

$('body').on('click', function (e) {
  $(e.currentTarget).addClass('another-page');
});

Примечание: вы также можете удалить прослушиватель событий в container, если пользователь примет это. Если вы сделаете это, убедитесь, что вы используете события namespace, потому что в контейнере могут быть другие прослушиватели, которые вы можете случайно удалить. см. https://api.jquery.com/event.namespace/ для получения дополнительной информации.

У нас есть аналогичное требование в нашем проекте, и это работает для меня. Протестировано в Chrome и IE11.

$('a.my-link').click(function(e) {
  e.preventDefault(); 
  if (do_something === true) {
    e.stopPropogation();
    MyApp.confirm("Are you sure you want to navigate away?")
    .done(function() {
      do_something = false;
      // this allows user to navigate 
      $(e.target).click();
    })
  }

})

Я отредактировал ваш код. Новые функции, которые я добавил:

1. Добавлено пространство имен к событию;
2. После нажатия на элемент событие будет удалено по пространству имен;
3. Наконец, после завершения необходимых действий в разделе «MyApp» продолжайте распространение, вызывая события «щелчка» других элементов.

Код:

$('a.my-link').on("click.myEvent", function(e) {
  var $that = $(this);
  $that.off("click.myEvent");
  e.preventDefault();
  e.stopImmediatePropagation();
  MyApp.confirm("Are you sure you want to navigate away?")
    .done(function() {
        //continue propogation of e
        $that.trigger("click");
    });
});

Это не проверено, но может послужить вам обходным путем.

$('a.my-link').click(function(e) {
  e.preventDefault(); e.stopPropogation();
  MyApp.confirm("Are you sure you want to navigate away?")
    .done(function() {
      //continue propogation of e
      $(this).unbind('click').click()
  })
})