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

Question

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

Когда пользователь щелкает определенную ссылку, я хотел бы представить ему диалоговое окно подтверждения. Если они нажмут «Да», я хотел бы продолжить исходную навигацию. Одна уловка: мой диалог подтверждения реализован путем возврата объекта jQuery.Deferred, который разрешается только тогда, когда / если пользователь нажимает кнопку Да. Таким образом, в основном диалоговое окно подтверждения является асинхронным.

В общем, я хочу что-то вроде этого:

$('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
    })
})

Конечно, я мог бы установить флаг и повторно запустить щелчок, но это чертовски беспорядочно. Любой естественный способ сделать это?

62

javascript dom event-propagation

задан Lightness Races with Monica 29 February 2012 в 16:51

1 ответ

Другие вопросы по тегам:

javascript dom event-propagation

Похожие вопросы:

score 2 · Answer 1

я думаю, что это могло быть опасно (!), но, кажется, работает во время записи, по крайней мере.

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

Рабочий стол:

край Chrome v.76.0.3809.132
Safari v.12.1.2
Firefox Quantum v.69.0.1
18
Край 17
Мобильный IE11

/ Планшет:

Android v.8 Интернет Samsung
Android v.8 Chrome
Android v.9 Chrome
iOs11.4 Safari
iOs12.1 Safari

[11 17].

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>  
  }
}