window屬性：onpointerdown

onpointerdown屬性

該GlobalEventHandlers事件處理程序onpointerdown被用來指定pointerdown事件的事件處理程序，在初始按下指針設(shè)備時(shí)將觸發(fā)該處理器。這個(gè)事件可以被發(fā)送到Window，Document和Element對(duì)象。

由于使用鼠標(biāo)或鼠標(biāo)兼容的設(shè)備而生成的用戶活動(dòng)，這在功能上等同于mousedown事件。如果pointerdown事件不是通過對(duì)preventDefault ()的調(diào)用而取消的，則大多數(shù)用戶代理將觸發(fā)一個(gè)mousedown事件，以便不使用指針事件的站點(diǎn)能夠正常工作。

您還可以使用addEventListener()為pointerdown事件添加偵聽器。

onpointerdown語法

target.onpointerdown = downHandler;

var downHandler = target.onpointerdown;

onpointerdown屬性值

一個(gè)Function，用于處理target Element，Document或Window的pointerdown事件。它接收輸入PointerEvent描述pointerdown事件。

onpointerdown示例

此示例演示如何使用onpointerdown監(jiān)視pointerdown事件并對(duì)其進(jìn)行操作。當(dāng)然，你也可以使用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建立函數(shù)handleDown()作為指針向下事件的事件處理函數(shù)。

該handleDown()函數(shù)依次查看pointerType的值以確定使用哪種指針設(shè)備，然后使用該信息來自定義字符串以替換目標(biāo)框的內(nèi)容。

然后調(diào)用該事件的preventDefault()方法，以確保mousedown事件未被觸發(fā)，如果我們?cè)谶@些事件的處理程序中缺少指針事件支持，則可能導(dǎo)致事件被處理兩次。

我們還有一個(gè)pointerup事件處理程序：

targetBox.onpointerup = handleUp;

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

此代碼的工作是在用戶與元素交互結(jié)束后（例如，釋放鼠標(biāo)按鈕或從屏幕上抬起觸筆或手指時(shí)），將原始文本恢復(fù)到目標(biāo)框中。

另外，調(diào)用事件的preventDefault()方法來確保mouseup事件不會(huì)被不必要地觸發(fā)。

HTML

HTML非常簡單：

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

CSS

CSS只是設(shè)置目標(biāo)的外觀，并不影響其功能：

#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;
}

規(guī)范

瀏覽器兼容性

我們正在將兼容性數(shù)據(jù)轉(zhuǎn)換為機(jī)器可讀的JSON格式。 

• 電腦端

• 移動(dòng)端

注釋：

[1]這是在bug 248918中實(shí)現(xiàn)的。

[2]支持首選項(xiàng)dom.w3c_pointer_events.enabled，默認(rèn)為false。