nanohref

Tiny href click handler library

Usage no npm install needed!

<script type="module">
  import nanohref from 'https://cdn.skypack.dev/nanohref';
</script>

README

nanohref stability

npm version build status downloads js-standard-style

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

:warning: 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

License

MIT