防止默认后实际做默认

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

这样，

1. 您运行一次弹出式打开器单击处理程序，
2. 然后阻止其他人，
3. 再次手动触发点击事件，
4. 这次什么都不做，但让其他人跑。

Answer 2

根据@Electrox-Qui-Mortem 的建议链接，完成预处理后，您可以移除事件侦听器并再次调用点击。

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

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

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

它在代码测试工具（如 JSfiddle 和 CodePen）中的性能很不稳定——您必须在实际应用程序中对其进行测试，以确保它是否适合您的用例。

在将外部函数引用为“侦听器”函数时，我只使用 removeEventListener 获得了良好的结果。在这种情况下test()

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>

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

在 * 上的嵌入式示例中它不起作用，但 here's a JSFiddle!