javascript - 根据条件允许/阻止默认事件

Question

我们正在尝试实现以下要求:用户单击链接，我们现在需要调用一个函数，然后(假设 2000 毫秒后)执行默认链接事件(可以是打开下一页、mailto 链接)或其他)。

我们尝试了很多与此方法类似的方法:

HTML

<a class="link-elem" href="foo.html">Foo Bar</a>

事件监听器

$('.link-elem').on('click', function(event, fromFunction) {
    if (fromFunction) {
      // do the default event
      console.log('event triggered again with fromFunction = true');
    } else {
      // call function
      otherFunction(event, {foo: 'bar'});

      // prevent default behavior
      // (tried all combinations of these)
      // return false;
      event.preventDefault();
      event.stopPropagation();
      event.stopImmediatePropagation();
    }
});

其他功能

var otherFunction = function(event, otherArg) {
   // do function stuff

   setTimeout(function() {
     // trigger event again with fromFunction = true
     $(event.target).trigger(event.type, true);
   }, 2000);
};

JS在这里摆弄:https://jsfiddle.net/kwh5tay8/

这样做的结果是我们看到了 console.log 消息，但实际事件没有发生，即下一页未加载。

我们无法读取 href 属性并执行诸如 window.location 之类的操作，因为我们不能依赖该事件作为简单链接。

有什么办法可以解决这个问题吗？

Answer 1

我猜你的问题是，你调度了事件但你没有执行任何东西， 我准备了一个示例 js 文件，您可以这样使用。

                var operation = "";

                $('.link-elem').on('click', function(event, fromFunction) {
                    if (fromFunction) {
                      // do the default event
                      callRequiredFunc();
                    } else {
                      // call function
                      otherFunction(event, { type : 'link', link: 'http://google.com'});

                      // prevent default behavior
                      // (tried all combinations of these)
                      // return false;
                      event.preventDefault();
                      event.stopPropagation();
                      event.stopImmediatePropagation();
                    }
                });

                var otherFunction = function(event, otherArg) {
                   // do function stuff
                 operation = otherArg
                   setTimeout(function() {
                     // trigger event again with fromFunction = true
                     $(event.target).trigger(event.type, true);
                   }, 2000);
                };

                var callRequiredFunc = function(event){
                        switch(operation.type){
                            case "mail":
                                $(location).attr('href', 'mailto:?subject='
                             + encodeURIComponent("This is my subject")
                             + "&body=" 
                             + encodeURIComponent("This is my body")
                                 );
                            break;
                            case "link":
                                window.location.href = operation.link
                            break;
                            case "whatever":
                            break;
                            default:
                            break;
                        }
                }