zoukankan      html  css  js  c++  java
  • Pointer-Events: 如何处理ScreenTouch和MouseClicks

    Abstract

    The features in this specification extend or modify those found in Pointer Events, a W3C Recommendation that describes events and related interfaces for handling hardware agnostic pointer input from devices including a mouse, pen, touchscreen, etc. For compatibility with existing mouse based content, this specification also describes a mapping to fire Mouse Events for other pointer device types.

    Introduction

    This section is non-normative.

    Today, most [HTML5] content is used with and/or designed for mouse input. Those that handle input in a custom manner typically code to [UIEVENTS] Mouse Events. Newer computing devices today, however, incorporate other forms of input, including touchscreens, pen input, etc. Event types have been proposed for handling each of these forms of input individually. However, that approach often incurs unnecessary duplication of logic and event handling overhead when adding support for a new input type. This often creates a compatibility problem when content is written with only one device type in mind. Additionally, for compatibility with existing mouse-based content, most user agents fire Mouse Events for all input types. This makes it ambiguous whether a Mouse Event represents an actual mouse device or is being produced from another input type for compatibility, which makes it hard to code to both device types simultaneously.

    To reduce the cost of coding to multiple input types and also to help with the above described ambiguity with Mouse Events, this specifications defines a more abstract form of input, called a pointer. A pointer can be any point of contact on the screen made by a mouse cursor, pen, touch (including multi-touch), or other pointing input device. This model makes it easier to write sites and applications that work well no matter what hardware the user has. For scenarios when device-specific handling is desired, this specification also defines properties for inspecting the device type which produced the event. The primary goal is to provide a single set of events and interfaces that allow for easier authoring for cross-device pointer input while still allowing for device-specific handling only when necessary for an augmented experience.

    An additional key goal is to enable multi-threaded user agents to handle default touch actions, such as scrolling, without blocking on script execution.

    Examples

    This section is non-normative.

    The following are example author code that demonstrates how the APIs in this specification might be used.

    EXAMPLE 1: Feature detection and event binding
    /* Bind to either Pointer Events or traditional touch/mouse */
    
    if (window.PointerEvent) {
        // if Pointer Events are supported, only listen to pointer events
        target.addEventListener("pointerdown", function(e) {
            // if necessary, apply separate logic based on e.pointerType
            // for different touch/pen/mouse behavior
            ...
        });
        ...
    } else {
        // traditional touch/mouse event handlers
        target.addEventListener('touchstart', function(e) {
            // prevent compatibility mouse events and click
            e.preventDefault();
            ...
        });
        ...
        target.addEventListener('mousedown', ...);
        ...
    }
    
    // additional event listeners for keyboard handling
    ...

    See more: 

    https://www.w3.org/TR/pointerevents/#intro

    参考案例:

    https://github.com/jquery-archive/PEP

     1 <html lang="en">
     2 <head>
     3   <meta charset="utf-8">
     4   <title>PEP (Pointer Events Polyfill)</title>
     5   <meta name="viewport" content="width=device-width">
     6   <!-- include PEP -->
     7   <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
     8 </head>
     9 <body>
    10 <button id="b" touch-action="none">Test button!</button>
    11 <p><output id="o"></output></p>
    12 <script>
    13 document.getElementById( "b" ).addEventListener( "pointerdown", function( e ) {
    14   document.getElementById( "o" ).innerHTML = "that was a " +
    15     e.pointerType + " " + e.type + " on a "+ e.target.nodeName;
    16 } );
    17 </script>
    18 </body>
    19 </html>

    测试:

    在浏览器中打开,点击鼠标

    用手触摸

     https://releases.jquery.com/pep/

    https://jaketrent.com/post/handling-touch-click-browser

    三颗油
  • 相关阅读:
    小tips:JS之for in、Object.keys()和Object.getOwnPropertyNames()的区别
    Promise原理讲解 && 实现一个Promise对象 (遵循Promise/A+规范)
    【笔记】原生JS实现的DOM操作
    HTML5利用canvas,把多张图合并成一张图片
    大数据之Zookeeper:zookeeper数据结构、zookeeper安装、zookeeper内部原理、分布式zookeeper部署、命令行、zookeeper的API、监听服务器动态上下线案例
    大数据Zookeeper系列之Zookeeper分布式协调服务部署
    HBase安装和基础编程
    【Hadoop入门学习系列之六】HBase基本架构、编程模型和应用案例
    【Hadoop入门学习系列之五】MapReduce 2.0编程实战
    【Hadoop入门学习系列之四】MapReduce 2.0应用场景和原理、基本架构和编程模型
  • 原文地址:https://www.cnblogs.com/Kevin-Yang/p/15515745.html
Copyright © 2011-2022 走看看