diff --git a/README.md b/README.md index 370cd02b..c0e971ce 100644 --- a/README.md +++ b/README.md @@ -119,6 +119,8 @@ render( `` is just a normal link, but it automatically adds and removes an "active" classname to itself based on whether it matches the current URL. +By default Link allow bubbling event on click, but you can control it by prop `preventBubbling`. + ```js import { Router, Link } from 'preact-router'; @@ -127,7 +129,7 @@ render(
diff --git a/src/index.d.ts b/src/index.d.ts index fed2cf69..391d9eeb 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -1,4 +1,5 @@ import * as preact from 'preact'; +import { LinkProps } from './match.d' export function route(url: string, replace?: boolean): boolean; export function route(options: { url: string; replace?: boolean }): boolean; diff --git a/src/index.js b/src/index.js index 01b4eb1c..a5beebc1 100644 --- a/src/index.js +++ b/src/index.js @@ -89,10 +89,12 @@ function routeFromLink(node) { } -function handleLinkClick(e) { +function handleLinkClick(e, props) { if (e.button==0) { routeFromLink(e.currentTarget || e.target || this); - return prevent(e); + + if (props.preventBubbling) return prevent(e); + return e; } } @@ -249,7 +251,7 @@ class Router extends Component { } const Link = (props) => ( - createElement('a', assign({ onClick: handleLinkClick }, props)) + createElement('a', assign({ onClick: e => handleLinkClick(e, props) }, props)) ); const Route = props => createElement(props.component, props); diff --git a/src/match.d.ts b/src/match.d.ts index 3d54e386..977b2f12 100644 --- a/src/match.d.ts +++ b/src/match.d.ts @@ -9,6 +9,7 @@ export class Match extends preact.Component { export interface LinkProps extends preact.JSX.HTMLAttributes { activeClassName: string; children?: preact.ComponentChildren; + preventBubbling?: boolean; } export function Link(props: LinkProps): preact.VNode;