Send event on ctrl/meta/shift and middle click

.cspell.json

@@ -29,7 +29,8 @@
  "popstate",
  "hashchange",
  "signup",
- "automagically"
+ "automagically",
+ "auxclick"
  ],
  "flagWords": [],
  "ignorePaths": [

src/lib/tracker.ts

@@ -277,21 +277,29 @@ export default function Plausible(
  }
  ) => {
  function trackClick(this: HTMLAnchorElement, event: MouseEvent) {
- if (event.ctrlKey) return; // Don't send event on Ctrl + Click, should behave like middle-mouse-click.
+ // auxclick is fired for any mouse-button except primary (left).
+ // The event should only be sent on aux (middle) click, return for others (right, etc).
+ const auxEvent = event.type === 'auxclick';
+ if (auxEvent && event.button !== 1) return;
 
  trackEvent('Outbound Link: Click', { props: { url: this.href } });
 
+ // _self (same as falsy), _parent and _top need a delay for the request to go through.
+ // _blank opens a new tab -> no need for delay
+ // no special handling for custom targets -> use the default browser behavior
  /* istanbul ignore next */
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore
  if (
+ (!this.target || this.target.match(/^_(self|parent|top)$/i)) &&
+ !auxEvent && // middle mouse click opens a new tab -> no need for delay
+ !event.ctrlKey && // ctrl + click opens a new tab -> no need for delay
+ !event.metaKey && // same as ctrl
+ !event.shiftKey && // shift + click opens a new window -> no need for delay
+ // don't try to access location object during testing
  !(
  typeof process !== 'undefined' &&
  process &&
  process.env.NODE_ENV === 'test'
- ) &&
- // _parent, _top, _self (same as none) need a delay for the request to go through
- (!this.target || this.target.match(/^_(self|parent|top)$/i))
+ )
  ) {
  setTimeout(() => {
  switch (this.target) {
@@ -310,7 +318,6 @@ export default function Plausible(
  }
  }, 150);
 
- // _blank and custom targets should use the default browser behavior
  event.preventDefault();
  }
  }
@@ -322,6 +329,7 @@ export default function Plausible(
  if (node instanceof HTMLAnchorElement) {
  if (node.host !== location.host) {
  node.addEventListener('click', trackClick);
+ node.addEventListener('auxclick', trackClick);
  tracked.add(node);
  }
  } /* istanbul ignore next */ else if ('querySelectorAll' in node) {
@@ -332,6 +340,7 @@ export default function Plausible(
  function removeNode(node: Node | ParentNode) {
  if (node instanceof HTMLAnchorElement) {
  node.removeEventListener('click', trackClick);
+ node.removeEventListener('auxclick', trackClick);
  tracked.delete(node);
  } /* istanbul ignore next */ else if ('querySelectorAll' in node) {
  node.querySelectorAll('a').forEach(removeNode);
@@ -362,6 +371,7 @@ export default function Plausible(
  return function cleanup() {
  tracked.forEach((a) => {
  a.removeEventListener('click', trackClick);
+ a.removeEventListener('auxclick', trackClick);
  });
  tracked.clear();
  observer.disconnect();