window属性:onpointerdown

2018-05-19 11:50 更新

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

规范

规范 状态 注释
Pointer Events – Level 2
该规范中的“onpointerdown”的定义。
Working Draft
非稳定版本
Pointer Events 
该规范中'onpointerdown'的定义。
Recommendation
初始定义

浏览器兼容性

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

  • 电脑端
特征 Chrome
Firefox(Gecko)
Internet Explorer
Opera
Safari
基本支持 支持:35 [1] 支持:59(59) 支持:10、11 不支持
  • 移动端
特征AndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本支持?支持:35[1]支持:29.0[2]支持:10、11?不支持

注释:

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

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

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号