Question

我想阻止链接的默认行为（a），然后执行默认行为，让我们在新窗口中打开链接。

以下是一些HTML代码：

<a href="somewhere" target="_blank" id="mylink">

JS代码：

document.getElementById('mylink').addEventListener('click', function (e) {
    e.preventDefault();
    axios.post('options', new FormData(document.querySelector('#myform')))
         .then(function(){ 
             // Here I want to do what the link should have done!
         });
});

我知道我可以这样做：

window.open(e.target.href);

但它不是一个选项，因为浏览器认为这是一个弹出窗口。而且我不想在JS中重写某些内容，只需像往常一样考虑链接：此链接必须执行其默认行为（已被阻止）。

有办法做到这一点吗？

Answer 1

这是一个想法：

var openingPopup = false;
document.getElementById('mylink').addEventListener('click', function (e) {
    if(!openingPopup){
        e.preventDefault();
        axios.post('options', new FormData(document.querySelector('#myform')))
            .then(function(){ 
                // make sure this would not run twice
                openingPopup = true;
                document.getElementById('mylink').click();
            });
    }else{
        // skipping this only for one time
        openingPopup = false; 
    }
});

这样，

您运行一次弹出窗口单击处理程序
然后阻止其他人，
再次手动触发点击事件
这次什么都不做，但允许其他人跑。

Answer 2

根据@ Electrox-Qui-Mortem建议的链接，在完成预处理后，您可以删除事件监听器并再次拨打该单击。

（相关的MDN链接：https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener）

＆＃13;

const anchor = document.getElementById('anchor');

anchor.addEventListener('click', test);

function test(e){
  e.preventDefault();
  alert('test');
  if( true ){
    console.log( this );
    this.removeEventListener('click', test);
    this.click();
  }
}

＆＃13;

<a id="anchor" href="https://www.google.com">Test</a>

＆＃13;

它在代码测试工具（如JSfiddle和CodePen）中的表现非常糟糕 - 您必须在实际应用程序中对其进行测试，以确保它是否适合您的用例。

在引用外部函数作为＆＃34; listener＆＃34;时，removeEventListener只有test()获得了良好的结果。 FUNC。在这种情况下interface Command{ void run(); }

Answer 3

以更“原生”的方式，您可以创建一个新的“点击”事件，该事件不可取消，并针对同一元素触发它。

var anchor = document.querySelector('#target');

function triggerClick(target) {
  var newClick = new MouseEvent('click', {
    view: window,
    bubbles: true,
    cancelable: false
  });
  
  target.dispatchEvent(newClick);
}

anchor.addEventListener('click', function(e) {
  e.preventDefault();
  
  if(e.defaultPrevented) {
    alert('Prevented!');
    triggerClick(anchor);
  }
  else {
    alert('Not prevented');
  }
});

<a href="https://google.com" target="_blank" id="target">Click me!</a>

此处的关键是在cancelable: false函数中创建的新事件中的triggerClick(target)，它绕过了e.preventDefault()。

在StackOverflow的嵌入式示例中，它不起作用，但是here's a JSFiddle！

实际上在防止默认后执行默认

3 个答案: