onpointerdown属性

该GlobalEventHandlers事件处理程序onpointerdown被用来指定pointerdown事件的事件处理程序，在初始按下指针设备时将触发该处理器。这个事件可以被发送到Window，Document和Element对象。

由于使用鼠标或鼠标兼容的设备而生成的用户活动，这在功能上等同于mousedown事件。如果pointerdown事件不是通过对preventDefault ()的调用而取消的，则大多数用户代理将触发一个mousedown事件，以便不使用指针事件的站点能够正常工作。

您还可以使用addEventListener()为pointerdown事件添加侦听器。

onpointerdown语法

target.onpointerdown = downHandler;

var downHandler = target.onpointerdown;

onpointerdown属性值

一个Function，用于处理target Element，Document或Window的pointerdown事件。它接收输入PointerEvent描述pointerdown事件。

onpointerdown示例

此示例演示如何使用onpointerdown监视pointerdown事件并对其进行操作。当然，你也可以使用addEventListener()。

JavaScript

首先，我们来看看处理pointerdown事件的JavaScript代码：

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.innerHTML = "<strong>Thanks for " + action + " me!</strong>";
  evt.preventDefault();
}

这只是使用onpointerdown建立函数handleDown()作为指针向下事件的事件处理函数。

该handleDown()函数依次查看pointerType的值以确定使用哪种指针设备，然后使用该信息来自定义字符串以替换目标框的内容。

然后调用该事件的preventDefault()方法，以确保mousedown事件未被触发，如果我们在这些事件的处理程序中缺少指针事件支持，则可能导致事件被处理两次。

我们还有一个pointerup事件处理程序：

targetBox.onpointerup = handleUp;

function handleUp(evt) {
  targetBox.innerHTML = "Tap me, click me, or touch me!";
  evt.preventDefault();
}

此代码的工作是在用户与元素交互结束后（例如，释放鼠标按钮或从屏幕上抬起触笔或手指时），将原始文本恢复到目标框中。

另外，调用事件的preventDefault()方法来确保mouseup事件不会被不必要地触发。

HTML

HTML非常简单：

<div id="target">
  Tap me, click me, or touch me!
</div>

CSS

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;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

规范

浏览器兼容性

我们正在将兼容性数据转换为机器可读的JSON格式。 

• 电脑端

• 移动端

注释：

[1]这是在bug 248918中实现的。

[2]支持首选项dom.w3c_pointer_events.enabled，默认为false。