PointerEvent
Baseline
åºãå©ç¨å¯è½
*
ãã®æ©è½ã¯åºãå®è£ ããã¦ãããå¤ãã®ãã¼ã¸ã§ã³ã®ç«¯æ«ããã©ã¦ã¶ã¼ã§åä½ãã¾ãã2020å¹´7æä»¥éããã¹ã¦ã®ãã©ã¦ã¶ã¼ã§å©ç¨å¯è½ã§ãã
* ãã®æ©è½ã®ä¸é¨ã¯ã対å¿ã¬ãã«ãç°ãªãå ´åãããã¾ãã
PointerEvent ã¤ã³ã¿ã¼ãã§ã¤ã¹ã¯ãæ¥è§¦ç¹ã®å½¢ç¶ãã¤ãã³ããçæããæ©å¨ã®ç¨®é¡ãæ¥è§¦é¢ã«å ããããå§åã®éãªã©ããã¤ã³ã¿ã¼ã«ãã£ã¦çæããã DOM ã¤ãã³ãã®ç¶æ
ã表ãã¾ãã
ãã¤ã³ã¿ã¼ã¯ãå ¥åæ©å¨ï¼ãã¦ã¹ããã³ãã¾ãã¯ã¿ããããã«ã®ä¸ã®æ¥è§¦ç¹ãªã©ï¼ã®ãã¼ãã¦ã§ã¢ã«ã¨ããããªã表ç¾ã§ãã ãã¤ã³ã¿ã¼ã¯ãç»é¢ãªã©ã®æ¥è§¦é¢ä¸ã®ç¹å®ã®åº§æ¨ï¼ã¾ãã¯åº§æ¨ã®éåï¼ãã¿ã¼ã²ããã«ãããã¨ãã§ãã¾ãã
ãã¤ã³ã¿ã¼ã®ããããã¹ãã¯ããã©ã¦ã¶ã¼ããã¤ã³ã¿ã¼ã¤ãã³ãã®ã¿ã¼ã²ããè¦ç´ ãæ±ºå®ããããã«ä½¿ç¨ããæç¶ã§ããé常ãããã¯ãã¤ã³ã¿ã¼ã®ä½ç½®ã¨ãç»é¢åªä½ä¸ã®ææ¸å ã®è¦ç´ ã®è¦è¦çãªã¬ã¤ã¢ã¦ããèæ ®ãã¦æ±ºå®ãã¾ãã
ã³ã³ã¹ãã©ã¯ã¿ã¼
PointerEvent()-
ä¿¡é ¼ã§ããªãåæ
PointerEventã使ãã¾ãã
ããããã£
ãã®ã¤ã³ã¿ã¼ãã§ã¤ã¹ã¯ãMouseEvent ããã³ Event ããããããã£ãç¶æ¿ãã¦ãã¾ãã
PointerEvent.altitudeAngleèªåå°ç¨-
ãã©ã³ã¹ãã¥ã¼ãµã¼ï¼ãã¤ã³ã¿ã¼ã¾ãã¯ã¹ã¿ã¤ã©ã¹ï¼ã®è»¸ã¨æ©å¨ã®ç»é¢ã® X-Y å¹³é¢ã®ãªãè§åº¦ã表ãã¾ãã
PointerEvent.azimuthAngleèªåå°ç¨-
Y-Z å¹³é¢ã¨ããã©ã³ã¹ãã¥ã¼ãµã¼ï¼ãã¤ã³ã¿ã¼ã¾ãã¯ã¹ã¿ã¤ã©ã¹ï¼ã®è»¸ã¨ Y 軸ã®ä¸¡æ¹ãæ ¼ç´ããå¹³é¢ã¨ã®éã®è§åº¦ã表ãã¾ãã
PointerEvent.persistentDeviceIdèªåå°ç¨-
PointerEventãçæãããã¤ã³ãã£ã³ã°ããã¤ã¹ç¨ã®åºæã®èå¥åã PointerEvent.pointerIdèªåå°ç¨-
ã¤ãã³ãã®åå ã¨ãªã£ã¦ãããã¤ã³ã¿ã¼ã®ä¸æã®èå¥åã
PointerEvent.widthèªåå°ç¨-
ãã¤ã³ã¿ã¼ã®æ¥è§¦å½¢ç¶ã®å¹ ï¼X 軸ä¸ã®å¤§ãããCSS ãã¯ã»ã«åä½ï¼ã
PointerEvent.heightèªåå°ç¨-
ãã¤ã³ã¿ã¼ã®æ¥è§¦å½¢ç¶ã®é«ãï¼Y 軸ä¸ã®å¤§ãããCSS ãã¯ã»ã«åä½ï¼ã
PointerEvent.pressureèªåå°ç¨-
0 ãã 1 ã®ç¯å²ã®ãã¤ã³ã¿ã¼å ¥åã®æ£è¦åãããå§åã ããã§ã0 㨠1 ã¯ããããããã¼ãã¦ã§ã¢ãæ¤åºã§ããæå°å§åã¨æå¤§å§åã表ãã¾ãã
PointerEvent.tangentialPressureèªåå°ç¨-
ãã¤ã³ã¿ã¼å ¥åã®æ£è¦åãããæ¥ç·å§åï¼ãã¬ã«å§åã¾ãã¯ã·ãªã³ãã¼å¿åï¼cylinder stressï¼ã¨ãå¼ã°ãã¾ãï¼ã¯
-1ãã1ã®ç¯å²ã§ã0ã¯ã³ã³ããã¼ã«ã®ä¸ç«ä½ç½®ã§ãã PointerEvent.tiltXèªåå°ç¨-
Y-Z å¹³é¢ã¨ããã¤ã³ã¿ã¼ï¼ãã³/ã¹ã¿ã¤ã©ã¹ãªã©ï¼è»¸ã¨ Y 軸ã®ä¸¡æ¹ãå«ãå¹³é¢ã¨ã®éã®å¹³é¢è§åº¦ï¼åº¦åä½ã
-90ãã90ã®ç¯å²ï¼ã PointerEvent.tiltYèªåå°ç¨-
X-Z å¹³é¢ã¨ããã¤ã³ã¿ã¼ï¼ãã³/ã¹ã¿ã¤ã©ã¹ãªã©ï¼è»¸ã¨ X 軸ã®ä¸¡æ¹ãå«ãå¹³é¢ã¨ã®éã®å¹³é¢è§åº¦ï¼åº¦åä½ã
-90ãã90ã®ç¯å²ï¼ã PointerEvent.twistèªåå°ç¨-
ãã¤ã³ã¿ã¼ï¼ãã³/ã¹ã¿ã¤ã©ã¹ãªã©ï¼ã®é·è»¸ãä¸å¿ã¨ããæè¨åãã®å転ã®åº¦æ°ï¼
0ãã359ã®ç¯å²ã®å¤ï¼ã PointerEvent.pointerTypeèªåå°ç¨-
ã¤ãã³ãã®åå ã¨ãªã£ãæ©å¨ã®ç¨®é¡ï¼ãã¦ã¹ããã³ãã¿ãããªã©ï¼ã示ãã¾ãã
PointerEvent.isPrimaryèªåå°ç¨-
ãã¤ã³ã¿ã¼ããã®ãã¤ã³ã¿ã¼ã®ç¨®é¡ã®ä¸»ãã¤ã³ã¿ã¼ã表ãã¦ãããã©ããã示ãã¾ãã
ã¡ã½ãã
PointerEvent.getCoalescedEvents()å®å ¨ãªã³ã³ããã¹ãç¨-
é ä¿¡ããã
pointermoveã¤ãã³ãã«çµåããããã¹ã¦ã®PointerEventã¤ã³ã¹ã¿ã³ã¹ã®åãè¿ãã¾ãã PointerEvent.getPredictedEvents()-
é ä¿¡ããã
pointermoveã¤ãã³ãã®çµåã¤ãã³ãã®å¾ã«ç¶ãã¨ãã©ã¦ã¶ã¼ãäºæ¸¬ããPointerEventã¤ã³ã¹ã¿ã³ã¹ã®åãè¿ãã¾ãã
ãã¤ã³ã¿ã¼ã¤ãã³ãã®ç¨®é¡
PointerEvent ã¤ã³ã¿ã¼ãã§ã¤ã¹ã«ã¯ãè¤æ°ã®ç¨®é¡ã®ã¤ãã³ããããã¾ãã ã©ã®ã¤ãã³ããçºçãããã夿ããã«ã¯ãã¤ãã³ãã® type ããããã£ã調ã¹ã¦ãã ããã
ã¡ã¢:
å¤ãã®å ´åããã¤ã³ã¿ã¼ã¨ãã¦ã¹ã®ä¸¡æ¹ã®ã¤ãã³ããéä¿¡ããããã¨ã«æ³¨æãããã¨ãéè¦ã§ãï¼ãã¤ã³ã¿ã¼åºæã§ãªãã³ã¼ãã§ãã¦ã¼ã¶ã¼ã¨å¯¾è©±ã§ããããã«ããããï¼ããã¤ã³ã¿ã¼ã¤ãã³ãã使ç¨ããå ´åã¯ãEvent.preventDefault() ãå¼ã³åºãã¦ãã¦ã¹ã¤ãã³ããå
±ã«éä¿¡ãããªãããã«ããå¿
è¦ãããã¾ãã
pointerover-
ãã®ã¤ãã³ãã¯ããã¤ã³ãã£ã³ã°ããã¤ã¹ãè¦ç´ ã®ããããã¹ãå¢çå ã«ç§»åããã¨ãã«çºçãã¾ãã
pointerenter-
ãã®ã¤ãã³ãã¯ããã¤ã³ãã£ã³ã°ããã¤ã¹ãè¦ç´ ã¾ãã¯ãã®åå«ã® 1 ã¤ã®ããããã¹ãå¢çå ã«ç§»åããã¨ãã«çºçãã¾ãã ããã«ã¯ãããã¼ã«å¯¾å¿ãã¦ããªãæ©å¨ããã®
pointerdownã¤ãã³ãã®çµæãå«ã¾ãã¾ãï¼pointerdownãåç §ï¼ã ãã®ç¨®é¡ã®ã¤ãã³ãã¯pointeroverã«ä¼¼ã¦ãã¾ããããããªã³ã°ããªãã¨ããç¹ãç°ãªãã¾ãã pointerdown-
ãã®ã¤ãã³ãã¯ããã¤ã³ã¿ã¼ãã¢ã¯ãã£ãã«ãªãã¨çºçãã¾ãã ãã¦ã¹ã®å ´åããã¿ã³ãæ¼ããã¦ããªãç¶æ ããå°ãªãã¨ã 1 ã¤ã®ãã¿ã³ãæ¼ãããç¶æ ã«ç§»è¡ããã¨ãã«çºçãã¾ããã¿ããã®å ´åãç©ççãªæ¥è§¦ããã¸ã¿ã¤ã¶ã¼ã¨ãªãããã¨ãã«çºçãã¾ãã ãã³ã®å ´åãã¹ã¿ã¤ã©ã¹ããã¸ã¿ã¤ã¶ã¼ã¨ç©ççã«æ¥è§¦ããã¨ãã«çºçãã¾ãã
ã¡ã¢: ç´æ¥æä½ãåãä»ããã¿ããç»é¢ã®ãã©ã¦ã¶ã¼ã§ã¯ã
pointerdownã¤ãã³ãã«ããæé»çãªãã¤ã³ã¿ã¼ãã£ããã£ãè¡ããã以éã®ãã¹ã¦ã®ãã¤ã³ã¿ã¼ã¤ãã³ããããã£ããã£ã¿ã¼ã²ããä¸ã§çºçãããã®ããã«ã¿ã¼ã²ããã«ææããã¾ãããã®ããpointeroverãpointerenterãpointerleaveãpointeroutã¯ãã£ããã£ãè¨å®ããã¦ããéã¯çºçãã¾ããããã£ããã£ã¯ã¿ã¼ã²ããè¦ç´ ä¸ã§element.releasePointerCaptureãå¼ã³åºããã¨ã§æåã§è§£é¤ãããã¨ãã§ããã¾ãpointerupã¾ãã¯pointercancelã¤ãã³ãã®å¾ã§æé»çã«è§£æ¾ããã¾ãã pointermove-
ãã®ã¤ãã³ãã¯ããã¤ã³ã¿ã¼ã座æ¨ã夿´ããã¨ãã«çºçãã¾ãã
pointerrawupdate-
ãã®ã¤ãã³ãã¯ããã¤ã³ã¿ã¼ã®ããããã®ããããã£ã夿´ãããã¨ãã«çºçãã¾ãã
pointerup-
ãã®ã¤ãã³ãã¯ããã¤ã³ã¿ã¼ãã¢ã¯ãã£ãã§ãªããªã£ãã¨ãã«çºçãã¾ãã
pointercancel-
ãã©ã¦ã¶ã¼ã¯ããã¤ã³ã¿ã¼ãã¤ãã³ããçæã§ããªããªã£ãã¨å¤æããå ´åï¼ä¾ãã°ãé¢é£ããããã¤ã¹ãç¡å¹ã«ãªã£ãå ´åï¼ããã®ã¤ãã³ããçºçããã¾ãã
pointerout-
ãã®ã¤ãã³ãã¯ã次ã®ãããªããã¤ãã®çç±ã§çºçãã¾ãã ãã¤ã³ãã£ã³ã°ããã¤ã¹ãè¦ç´ ã®ããããã¹ãå¢çå¤ã«ç§»åããã ããã¼ããµãã¼ããã¦ããªãããã¤ã¹ã®
pointerupã¤ãã³ããçºçããï¼pointerupãåç §ï¼ãpointercancelã¤ãã³ãã®çºçå¾ï¼pointercancelãåç §ï¼ã ãã³/ã¹ã¿ã¤ã©ã¹ããã¸ã¿ã¤ã¶ã¼ã§æ¤åºå¯è½ãªããã¼ç¯å²ãé¢è±ããã¨ãã pointerleave-
ãã®ã¤ãã³ãã¯ããã¤ã³ãã£ã³ã°ããã¤ã¹ãè¦ç´ ã®ããããã¹ãå¢çå¤ã«ç§»åããã¨ãã«çºçãã¾ãã ãã³ããã¤ã¹ã®å ´åããã®ã¤ãã³ãã¯ãã¹ã¿ã¤ã©ã¹ããã¸ã¿ã¤ã¶ã¼ã§æ¤åºå¯è½ãªããã¼ç¯å²ãé¢è±ããã¨ãã«çºçãã¾ãã
gotpointercapture-
ãã®ã¤ãã³ãã¯ãè¦ç´ ããã¤ã³ã¿ã¼ãã£ããã£ãåãåã£ãã¨ãã«çºçãã¾ãã
lostpointercapture-
ãã®ã¤ãã³ãã¯ããã¤ã³ã¿ã¼ã«å¯¾ãããã¤ã³ã¿ã¼ãã£ããã£ãè§£æ¾ãããå¾ã«çºçãã¾ãã
ä¾
åããããã£ã種é¡ã®ã¤ãã³ããããã³ã°ãã¼ãã«ã¤ãã³ããã³ãã©ã¼ã®ä¾ã¯ãããããã®ãªãã¡ã¬ã³ã¹ãã¼ã¸ã«å«ã¾ãã¦ãã¾ãã
仿§æ¸
| 仿§æ¸ |
|---|
| Pointer Events > # pointerevent-interface > |