nanohref

Tiny href click handler library.

Usage

var nanohref = require('nanohref')
 
// Handler automatically attached to window.document
nanohref(function (location) {
  console.log('new location is', location.pathname)
})
 
// Create DOM node
var el = document.createElement('a')
el.setAttribute('href', '/my-link')
el.innerText = 'Click me'
document.body.appendChild(el)
 
// Trigger click
el.click()
// => "new location is /my-link"

Ignoring links

By default all href links are handled. The event is not handled under the following conditions:

• the click event had .preventDefault() called on it
• the link has a data-nanohref-ignore attribute
• the link has a target="_blank" attribute with rel="noopener noreferrer"
• a modifier key is enabled (e.g. ctrl, alt, shift or meta)
• the link's href starts with protocol handler such as mailto: or dat:
• the link points to a different host
• the link has a download attribute

⚠️ Note that we only handle target=_blank if they also have rel="noopener noreferrer" on them. This is needed to properly sandbox web pages. Once noopener becomes more widespread, we can drop noreferrer too (currently just 60% of browsers in use support it).

API

nanohref(handler(location), [rootNode])

Create a new anchor click handler. The second argument is for the root node, which defaults to window.document.

See Also

• MDN/link-types
• caniuse/rel=noopener
• mapbox/link-hijacker

License

MIT