event.preventDefault() not working when clicks <a> elements

[xuchaoqian]

Describe the bug

We want to capture all click events on < a > elements, and then open link in new tauri window or custom tab(just like chrome tab), instead of opening link in the default browser.

It works fine in the default browser, but gets unexpected result in tauri windows: event.preventDefault() does NOT work anymore, tauri always open it in the default browser.

To Reproduce

Steps to reproduce the behavior:

Code sample as following(See it online: https://jsfiddle.net/uvrt0ajd/5/):

<a href="http://stackoverflow.com/q/8614438/1366033" 
   onclick="event.preventDefault()" 
   target="_blank">click</a>
<a href="http://stackoverflow.com/q/8614438/1366033" target="_blank" >click2</a>
<a href="http://stackoverflow.com/q/8614438/1366033" target="_blank" >click3</a>
<script>
  const links = document.links;
  for (let i = 0, n = links.length; i < n; i++) {
    links[i].onclick = function (event) {
      event.preventDefault();
      return false;
    };
  }
</script>

Expected behavior

Should NOT open the link in the default browser.

Platform and Versions (required):

Operating System - Mac OS, version 11.6.0 X64

Node.js environment
  Node.js - 14.18.1
  @tauri-apps/cli - 1.0.0-beta.10
  @tauri-apps/api - 1.0.0-beta.8

Global packages
  npm - 6.14.15
  yarn - 1.22.17

Rust environment
  rustc - 1.56.0
  cargo - 1.56.0

App directory structure
/bin
/node_modules
/webpack
/public
/src-tauri
/build
/.git
/.vscode
/src

App
  tauri.rs - 1.0.0-beta.8
  build-type - bundle
  CSP - default-src blob: data: filesystem: ws: wss: http: https: tauri: 'unsafe-eval' 'unsafe-inline' 'self' img-src: 'self'
  distDir - ../build
  devPath - http://localhost:9091
  framework - React
  bundler - Webpack

[amrbashir]

Can you change your snippet to

document.addEventListener('click', (e) => { 
  if (e.target.matches('a') {
    e.preventDefault();
    e.preventImmediatePropagation(); // might not be necessary
  }
})

please re-open if the issue persists.

[amrbashir]

Also check #1657

[xuchaoqian]

Thank you for your response.

It does not work, too.

Can you change your snippet to

document.addEventListener('click', (e) => { 
  if (e.target.matches('a') {
    e.preventDefault();
    e.preventImmediatePropagation(); // might not be necessary
  }
})

please re-open if the issue persists.

But I got a workaround. Just change the target attribute of link to "_tab" or any other names not in the standard set: _self, _parent, _top, _blank.

    const links = document.links;
    for (let i = 0, n = links.length; i < n; i++) {
      const link = links[i];
      link.setAttribute("target", "_tab");
      link.onclick = function (event) {
        event.preventDefault();
        return false;
      };
    }

This workaround is suitable for our own sites, but does NOT work for third-party's site. It will be better to support capturing & handling all events from html document directly.

[amrbashir]

I had a typo in that snippet, apologies.
we are capturing all clicks on <a> here so you might need to also add e.stopPropagation(), anyhow you should subscribe to the other issue and discuss it further there.

[xuchaoqian]

Thank you so much. I will discuss this feature/bug in the other issue.

I had a typo in that snippet, apologies. we are capturing all clicks on <a> here so you might need to also add e.stopPropagation(), anyhow you should subscribe to the other issue and discuss it further there.

FYI:
I corrected that typo actually, but it still does not work. According to your advice, I have changed my code, as following:

    const links = document.links;
    for (let i = 0, n = links.length; i < n; i++) {
      const link = links[i];
      link.setAttribute("target", "_tab");
      link.onclick = function (event) {
        event.preventDefault();
        event.stopPropagation();
        return false;
      };
    }

[amrbashir]

Alright, thanks for reporting back. Further discussion should be in #1657

[PierXuY]

function setupLinks(node) {
    if (node.nodeName.toLowerCase() === 'a' && node.getAttribute("target") === "_blank") {
        console.log('Found <a> tag:', node);
        node.onclick = function (event) {
            event.preventDefault();
            event.stopPropagation();
            window.open(node.href, "_blank")
            return false;
        };

    }

    if (node.childNodes.length > 0) {
        node.childNodes.forEach((childNode) => {
            setupLinks(childNode);
        });
    }
}

const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        mutation.addedNodes.forEach((node) => {
            setupLinks(node);
        });
    });
});

const target = window.document;
const config = { childList: true, subtree: true };
observer.observe(target, config);