取消后如何继续事件传播？

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

当然，我可以设置一个标志并重新触发单击，但这太混乱了。有什么自然的方法可以做到这一点吗？

Answer 1

令我惊讶的是，下面是在 Chrome 13 中实际运行的代码片段。

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

这不是很跨浏览器，也许将来会修复，因为这感觉像是安全风险，恕我直言。

如果取消事件传播，我不知道会发生什么。

Answer 2

这可能有风险，但至少在撰写本文时似乎有效，我们正在生产中使用它。

这是 ES6 和 React，我已经测试并发现它适用于以下浏览器。一个好处是，如果有例外（在制作过程中有几个例外），它会像正常的

<a>

链接一样转到该链接，但它不会是 SPA，然后是 ofc。

桌面：

Chrome v.76.0.3809.132
Safari 12.1.2 版
Firefox 量子 v.69.0.1
边缘18
边缘17
IE11

手机/平板电脑：

Android v.8 三星互联网
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() {
    <Link
      onClick={(e => this.onProductClick(e))}
    >
      Lorem
    </Link>  
  }
}

Answer 3

我在我的一个项目中通过这种方式解决了问题。此示例适用于一些基本事件处理，例如单击等。确认处理程序必须是第一个处理程序绑定。

    // 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 :)

Answer 4

如果我正确理解了问题，我认为您可以将事件更新为您所在的闭包中的原始事件。所以只需在 .done 函数中设置 e = e.originalEvent 即可。

https://jsfiddle.net/oyetxu54/

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

这是一个带有不同示例的小提琴（保持控制台打开，以便您可以看到消息）：这在 Chrome 和 Firefox 中对我有用

Answer 5

我解决了这个问题：

在父元素上放置事件监听器
仅当用户确认时才从链接中删除课程
删除课程后重新单击链接。

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/ 了解更多详细信息。

Answer 6

我们的项目有类似的要求，这对我有用。在 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();
    })
  }

})

Answer 7

我编辑了你的代码。我添加的新功能：

为事件添加了命名空间；
点击元素后事件将被命名空间移除；
最后，完成“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");
    });
});

Answer 8

您可以将 stopPropagation 包装在函数中。然后添加/删除。

function stopProp(event){
    event.stopPropagation(); // or stopImmediatePropagation();
}
yourTarget.addEventListener("click", stopProp);
yourTarget.removeEventListener("click", stopProp);

Answer 9

这未经测试，但可能作为您的解决方法

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

取消后如何继续事件传播？

问题描述投票：0回答：9

9个回答

最新问题

取消后如何继续事件传播？

问题描述 投票：0回答：9

9个回答

最新问题

问题描述投票：0回答：9