index.html

---
title: GlobalEventHandlers.onpointerdown
slug: Web/API/GlobalEventHandlers/onpointerdown
tags:
- API
- Document
- Element
- GlobalEventHandlers
- HTML DOM
- Pointer Events
- Pointer Events API
- PointerEvent
- Property
- Reference
- Window
browser-compat: api.GlobalEventHandlers.onpointerdown
---
<div>{{APIRef("HTML DOM")}}</div>

<p>The {{domxref("GlobalEventHandlers")}} event handler
  <strong><code>onpointerdown</code></strong> is used to specify the event handler for the
  {{event("pointerdown")}} event, which is fired when the pointing device is initially
  pressed. This event can be sent to {{domxref("Window")}}, {{domxref("Document")}}, and
  {{domxref("Element")}} objects.</p>

<p>This is functionally equivalent to the {{event("mousedown")}} event when generated due
  to user activity with a mouse or mouse-compatible device. If the
  <code>pointerdown</code> event isn't canceled through a call to
  {{domxref("Event.preventDefault", "preventDefault()")}}, most user agents will fire a
  <code>mousedown</code> event, so that sites not using pointer events will work.</p>

<p>You can also use {{domxref("EventTarget.addEventListener", "addEventListener()")}} to
  add a listener for <code>pointerdown</code> events.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush: js"><var>target</var>.onpointerdown = <var>downHandler</var>;

var <var>downHandler</var> = <var>target</var>.onpointerdown;
</pre>

<h3 id="Value">Value</h3>

<p>A {{jsxref("Function")}} to handle the <code>pointerdown</code> event for the
  <code><var>target</var></code> {{domxref("Element")}}, {{domxref("Document")}}, or
  {{domxref("Window")}}. It receives as input the {{domxref("PointerEvent")}} describing
  the <code>pointerdown</code> event.</p>

<h2 id="Example">Example</h2>

<h3>Responding to pointer down events</h3>

<p>This example demonstrates how to watch for and act upon <code>pointerdown</code> events
  using <code>onpointerdown</code>. You could also use <code>addEventListener()</code>, of
  course.</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;div id="target"&gt;
    Tap me, click me, or touch me!
&lt;/div&gt;</pre>

<h4 id="CSS">CSS</h4>

<p>The CSS sets up the appearance of the target, and doesn't affect its functionality at  all.</p>

<pre class="brush: css">#target {
  width: 400px;
  height: 30px;
  text-align: center;
  font: 16px "Open Sans", "Helvetica", sans-serif;
  color: white;
  background-color: blue;
  border: 2px solid darkblue;
  cursor: pointer;
  user-select: none;
}</pre>

<h4 id="JavaScript">JavaScript</h4>

<pre class="brush: js">var targetBox = document.getElementById("target");

targetBox.onpointerdown = handleDown;

function handleDown(evt) {
  var action;

  switch(evt.pointerType) {
    case "mouse":
      action = "clicking";
      break;
    case "pen":
      action = "tapping";
      break;
    case "touch":
      action = "touching";
      break;
    default:
      action = "interacting with";
      break;
  }

  targetBox.textContent = `Thanks for ${action} me!`;
  evt.preventDefault();
}</pre>

<p>This uses <code>onpointerdown</code> to establish the function
  <code>handleDown()</code> as the event handler for pointer down events.</p>

<p>The <code>handleDown()</code> function, in turn, looks at the value of
  {{domxref("PointerEvent.pointerType", "pointerType")}} to determine what kind of
  pointing device was used, then uses that information to customize a string to replace
  the contents of the target box.</p>

<p>Then the event's {{domxref("Event.preventDefault", "preventDefault()")}} method is
  called to ensure that the <code>mousedown</code> event isn't triggered, potentially
  causing events to be handled twice if we had a handler for those events in case Pointer
  Event support is missing.</p>

<p>We also have a handler for {{event("pointerup")}} events:</p>

<pre class="brush: js">targetBox.onpointerup = handleUp;

function handleUp(evt) {
  targetBox.textContent = "Tap me, click me, or touch me!";
  evt.preventDefault();
}</pre>

<p>This code restores the original text into the target box after the
  user's interaction with the element ends (for example, when they release the mouse
  button, or when they lift the stylus or finger from the screen).</p>

<p>In addition, the event's {{domxref("Event.preventDefault", "preventDefault()")}} method
  is called to ensure that the <code>mouseup</code> event isn't triggered unnecessarily.
</p>

<h4 id="Result">Result</h4>

<p>The resulting output is shown below. Try tapping, clicking, or touching the box and see
  what happens. For full effect, try it with a variety of pointer types.</p>

<p>{{EmbedLiveSample("Responding_to_pointer_down_events", 450, 50)}}</p>

<h2 id="Specifications">Specifications</h2>

{{Specifications}}

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{Compat}}</p>

<h2 id="See_also">See also</h2>

<ul>
  <li><a href="/en-US/docs/Web/API/Pointer_events">Pointer events</a></li>
  <li><a href="/en-US/docs/Web/API/Pointer_events/Using_Pointer_Events">Using Pointer
      Events</a></li>
  <li><a href="/en-US/docs/Web/CSS/CSSOM_View/Coordinate_systems">Coordinate systems</a>
  </li>
  <li>
    <code><a href="/en-US/docs/Web/API/Document/pointerdown_event">Document: pointerdown</a></code>
    event</li>
  <li>
    <code><a href="/en-US/docs/Web/API/HTMLElement/pointerdown_event">HTMLElement: pointerdown</a></code>
    event</li>
</ul>