ポイントイベントの使い方

今回は、Point イベントの使い方と、Point イベントを使用する際の注意事項について説明します。以下は実際のケースです。見てみましょう。

はじめに

この記事は長い間下書きボックスに眠っていましたが、最近関連する問題に遭遇したため、もう一度整理しました。これは CSS ポインター イベントに関するものではないことに注意してください。以下ではすべてを述べませんが、詳細な紹介を見てみましょう。

原因

暗い嵐の夜から、誰かが私たちのウェブアプリがChromeシミュレーターでエラーを報告し始めたことを発見しました。エラーメッセージはおそらく次のとおりでした。

VM1023:1 Uncaught TypeError: Cannot read property '0' of unknown

しかし、問題があるのは彼のブラウザだけであり、私のマシンでは同じことを繰り返さないという精神で、機能には影響しません。当時はとても忙しかったので、この問題の優先順位は高くありませんでしたが、しばらくすると、同じ問題を抱えている人が徐々に増えてきたため、この問題に注目するようになりました。

位置の問題コードは、コールスタックに基づいてすぐに特定されました。ソースコードは、おそらく次のような、前の同僚によって書かれたコンポーネントコードでした。イベントがこのフィールドに触れなかったため、イベントがトリガーされ、

が例外をスローしました

。しかし、以前は問題なく動作していたのですが、ブラウザの API が変更されたのでしょうか?そして、ポインターダウンイベントについては知りませんでしたが、このイベントは何を処理するために使用されるのでしょうか?そこで私は 2 つの質問から調査を開始しました:

ポインターダウン イベントとは何ですか?

• なぜ突然エラーが発生し始めたのですか? 問題は、W3C の公式ドキュメントを読むことです。ここで私の理解を簡単に説明します。

• デバイス入力フォームの多様化

PC時代では、マウスを介して画面を操作します。現時点では、システムを設計する際に考慮する必要があるのはマウスイベントだけです。しかし、現在では、スマートフォンやタブレットなど、タッチやスタイラスなどの他の入力方法を備えた新しいデバイスが数多く登場しており、当局はこれらの入力フォーム用の新しいイベントも提供しています。

しかし、開発者にとって、これは非常に面倒なことです。たとえば、ユーザーの動きに基づいて絵を描きたい場合は、PCに対応する必要があるため、Webページにさまざまなイベントを適応させる必要があります。コードは次のようになります

dom.on('touchstart pointerdown', function (event) {
 /*部分业务代码*/
 var touch = event.touches[0]; //报错的地方
 /*部分业务代码*/
})

より多くの入力デバイスと互換性を持たせる必要がある場合はどうすればよいですか?たとえば、スタイラスの場合、コードは非常に複雑になります。さらに、既存のマウス イベントベースのコードと互換性を保つために、多くのブラウザーはすべての入力タイプに対してマウス イベントをトリガーします (たとえば、touchmove がトリガーされると、mousemove がトリガーされます。Chrome でテストしましたが、トリガーされませんでした)。デバイス、スタイラスがない状況はテストされていません)、これはイベントが実際にマウスによってトリガーされたかどうかを確認できないことにもつながります。

複数の入力フォームと互換性を持たせる方法

この一連の問題を解決するために、W3C は新しい入力フォーム、つまりポインターを定義しました。マウス、タッチ、スタイラス、またはその他の入力デバイスによってトリガーされる画面上の接触は、ポインター イベントとしてカウントされます。

その API はマウス イベントに非常に似ており、移行が非常に簡単です。 clientX、ターゲットなどのマウス イベントによく使用されるプロパティを提供することに加えて、開発者がポインタ イベントを使用できるように、圧力、接触面、傾斜角などの他の入力デバイスのプロパティも提供します。すべての入力を提供するため、デバイスは独自の機能を開発します。

提供されるプロパティ

ポインターイベントは、いくつかの一意のイベント属性を提供します

pointerId: 現在のポインターイベントの一意の識別子、主にマルチタッチ中の唯一の入力ソースを識別します

width : の幅接触面

高さ: 接触面の高さ

pressure：接触的压力值，范围是0-1，对于不支持压力的硬件，比如鼠标，按压时该值必须为 0.5，否则为 0

tiltX，titltY：手写笔的角度

pointerType：事件类型，目前有 mouse，pen，touch，如果是无法探测的指针类型，则该值为空字符串

isPrimary：用于标识是否是主指针，主要是在多点触控中生效，开发者也可以通过忽略非主指针的指针事件来实现单点触控。

如何确定主指针：

鼠标输入：一定是主指针

触摸输入：如果 pointerdown 触发时没有其他激活的触摸事件，isPrimary 为 true

手写笔输入：与触摸事件类似，pointerdown 触发时没有其他激活的 pointer 事件

相关事件

事件名称	作用
pointerover	与 mouseover 行为一致
pointerenter	与 mouseenter 行为一致
pointerdown	指针进入活动状态，比如触摸了屏幕，类似于 touchstart
pointermove	指针进行了移动
pointerup	指针取消活动状态，比如手指离开了屏幕，类似于 touchend
pointercancel	类似于 touchcancel
pointerout	指针离开元素边缘或者离开屏幕，类似于 mouseout
pointerleave	类似于 mouseleave
gotpointercapture	元素捕获到指针事件时触发
lostpointercapture	指针被释放时触发

可以看到，pointer 事件与已知的事件类型基本一致，但是有一点区别：在触摸屏上，我们可能会滑动屏幕来触发页面滚动，缩放或者刷新，对于 touch 事件，这时会触发 touchmove，但是对于 pointer 事件，当触发这些浏览器行为时，你却会接收到 pointercancel 事件以便于通知你浏览器已经接管了你的指针事件。

如何检测

首先，pointer 事件的支持程度已经很不错了，你可以使用 Pointer Events polyfill （本地下载）来进行兼容，也可以自行检测

if (window.PointerEvent) {
 // 支持
} else {
 // 不支持
}

导致问题的原因

这时候，对于本文一开始提到的问题就显而易见了，因为 point events 是没有 touches 这个属性的。那么我们还有两个问题。

为什么之前会用到 point events？

后来我看了下 zepto 的源码，在事件处理时是考虑到了 point event 的，同事之前写的代码大概是参考了 zepto 的事件系统。

为什么会突然爆发这个问题？

很简答，Chrome 55 开始支持这个 API，Chrome 具体的支持信息可以参考官方日志，至于怎么检测浏览器支持，可以参考上面的内容

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

怎样使用Vue中字符串模板

如何处理Mac安装thrift因bison报错

以上がポイントイベントの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。