---
name: "up:click"
area: "API"
kind: "DOM event"
parent: "up.link module"
url: "https://unpoly.com/api/up:click"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [up.link module](https://unpoly.com/api/up.link.md)</nav>

# up:click

A `click` event that honors the [`[up-instant]`](https://unpoly.com/api/up-instant.md) attribute.

This event is generally emitted when an element is clicked. However, for elements with an [`[up-instant]`](https://unpoly.com/api/up-instant.md) attribute, this event is emitted on `mousedown` instead. If the press lands on an element within that handles its own click, like a checkbox, or another script prevented the `mousedown` event, `up:click` is emitted on `click` as usual.

This is useful for listening to links being activated without needing to know whether a link is [`[up-instant]`](https://unpoly.com/api/up-instant.md).

<nav aria-label="Guides">

- [Learn: Elements that act like links or buttons](https://unpoly.com/learn/faux-interactive-elements.md)

</nav>

<nav aria-label="Contents">

#### Contents

- [Example](#example)
- [Cancellation](#cancellation)
- [Accessibility](#accessibility)
- [Only unmodified clicks are considered](#only-unmodified-clicks-are-considered)
- [Event properties](#properties)

</nav>

## Example {#example}

Assume we have two links, one of which is [`[up-instant]`](https://unpoly.com/api/up-instant.md):

```html
<a href="/one">Link 1</a>
<a href="/two" up-instant>Link 2</a>
```

The following event listener will be called when _either_ link is activated:

```js
document.addEventListener('up:click', function(event) {
  ...
})
```

## Cancellation {#cancellation}

You may cancel an `up:click` event using `event.preventDefault()`.

Canceling `up:click` on a hyperlink will prevent Unpoly from [following](https://unpoly.com/api/up-follow.md) that link.

The underlying `click` or `mousedown` event will also be canceled.

## Accessibility {#accessibility}

If the user activates an element using their keyboard, the `up:click` event will be emitted when the key is pressed even if the element has an [`[up-instant]`](https://unpoly.com/api/up-instant.md) attribute.

## Only unmodified clicks are considered {#only-unmodified-clicks-are-considered}

To prevent overriding native browser behavior, the `up:click` event is only emitted for unmodified clicks.

In particular, it is not emitted when the user holds `Shift`, `CTRL`, or `Meta` while clicking, nor when the user clicks with a secondary mouse button.

---

## Event properties {#properties}

### event.target {#event.target}

(required)

The clicked element.

Type: [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element)

### event.originalEvent {#event.originalEvent}

(required)

The underlying `click` or `mousedown` event.

Type: [Event](https://developer.mozilla.org/en-US/docs/Web/API/Event)

### event.preventDefault() {#event.preventDefault}

(required)

Prevents this event and also the original `click` or `mousedown` event.