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消息，但实际事件没有发生，a.k.a。没有加载下一页。

我们无法读取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;
                        }
                }

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

1 个答案: