aurelia / aurelia/framework

Unable to preventDefault on route-href when pushState is true

Open
#848 12 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
11.7k
Forks
608
PR merge metrics
No merged PRs in 30d

Description

I'm trying to prevent a link with a `route-href` attribute from navigating to the new URL.

When I configure the router to use `hashChange` instead of `pushState` it works fine. But if I switch to `pushState` `preventDefault()` does nothing:

```js
import {inject} from 'aurelia-framework';

@inject(Element)
export class PreventHrefCustomAttribute {
constructor (el) {
this.el = el;
this.onClick = e => {
e.preventDefault(); // This only works when pushState: false, hashChange: true

alert('The href should not be followed');
};
}

attached () {
this.el.addEventListener('click', this.onClick);
}

detached () {
this.el.removeEventListener('click', this.onClick);
}
}
```

`${item.name}`

Contributor guide

Open the contributing guide

Research direction

Start with the route-href behavior and the custom attribute's click handler shown in the issue, then compare router behavior with hashChange enabled versus pushState enabled. Reproduce the link navigation in both configurations and verify that preventDefault reliably stops navigation when the handler calls it.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.