全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  技术干货

Pointerdown事件用法介绍

发布时间:2023-11-25 14:05:48
发布人:xqq

一、pointerdown事件介绍

pointerdown事件是指用户在设备上触摸屏幕或点击鼠标右键时触发的事件。它是UIEvent的子事件,可以在DOM中进行监听。当用户使用指针设备触摸屏幕或点击鼠标右键时,会触发这个事件。这个事件与mousemove事件、pointermove事件和touchmove事件一起使用可以实现动态的交互效果。

二、pointerdown事件的应用

1. 监听用户输入



上述代码可以通过监听指定元素上的pointerdown事件,来处理用户在该元素上的输入。当用户在该元素上按下鼠标或手指时,会触发该事件,从而在控制台打印出相应的信息。

2. 实现拖动效果



上述代码可以通过监听指定元素上的pointerdown事件、pointermove事件和pointerup事件,实现元素的拖动效果。当用户在该元素上按下鼠标或手指时,会触发pointerdown事件,记录下鼠标或手指的坐标,标记元素正在被拖动。当用户移动鼠标或手指时,会触发pointermove事件,计算出鼠标或手指的偏移量并更新元素的位置。当用户释放鼠标或手指时,会触发pointerup事件,标记元素停止拖动。当鼠标或手指移出元素范围时,会触发pointerleave事件,标记元素停止拖动。

三、pointerdown事件的属性

1. pointerId

pointerId属性表示触发pointerdown事件的指针的唯一标识符。它是一个非负整数。不同的指针设备会生成不同的唯一标识符。



上述代码可以通过打印出event.pointerId的值来获取指针的唯一标识符。

2. pressure

pressure属性表示触摸或按下的压力大小,它是一个浮点数。如果不支持压感,这个值默认为1.0。如果支持压感,这个值将随着按压的力度而变化。



上述代码可以通过打印出event.pressure的值来获取当前触点的压力大小。

3. pointerType

pointerType属性表示引发事件的设备类型,它的值有以下几种:

mouse:鼠标 pen:触屏笔 touch:触摸屏幕



上述代码可以通过检查event.pointerType属性的值来判断触发事件的设备类型。

四、pointerdown事件的兼容性

pointerdown事件在最新版本的现代浏览器中得到支持,包括Chrome、Firefox、Edge、Safari和Opera。如果要在老式的浏览器上使用这个事件,可以考虑使用mousedown事件和touchstart事件代替。



上述代码可以通过监听mousedown事件和touchstart事件来代替pointerdown事件,在老式的浏览器中实现相同的效果。

五、小结

pointerdown事件是一种与触摸屏幕或点击鼠标右键相关的UI事件,可以用于监听用户输入、实现拖动效果等。它具有pointerId、pressure和pointerType等属性,可以获取触点的唯一标识符、触点的压力大小和引发事件的设备类型等信息。这个事件在现代浏览器中得到支持,对于老式的浏览器可以使用mousedown事件和touchstart事件代替。

pointerdown

相关文章

linux目录链接,linux把一个目录链接到另一个目录

linux目录链接,linux把一个目录链接到另一个目录

2023-11-25
linux如何关闭cpu超频,linux 超频

linux如何关闭cpu超频,linux 超频

2023-11-25
linux7改语言,linux如何改语言

linux7改语言,linux如何改语言

2023-11-25
linux安装字符集,linux 字符

linux安装字符集,linux 字符

2023-11-25

最新文章

武汉新媒体行业公司排名

武汉新媒体行业公司排名

2023-11-01
武汉新媒体就业现状好吗

武汉新媒体就业现状好吗

2023-11-01
武汉全媒体行业发展现状及趋势

武汉全媒体行业发展现状及趋势

2023-10-31
武汉全媒体现状

武汉全媒体现状

2023-10-31
在线咨询 免费试学 教程领取