手势

除了标准的 DOM 事件，元素还会触发合成的“手势”事件。从浏览器的角度来看，主要有 3 种指针、触摸和鼠标事件类型 - 开始、移动和结束

在解释这些事件的顺序和时序后，框架可以合成更复杂的事件，例如 drag、swipe、longpress、pinch、rotate 和 tap。Ext JS 应用程序可以像监听任何其他事件一样监听手势事件，例如

Ext.get('myElement').on('longpress', handlerFunction);

通过拦截所有 3 种类型的事件（鼠标、指针和触摸），Ext JS 允许任何手势响应任何类型的输入。这意味着不仅可以使用触摸输入触发所有手势，而且可以使用鼠标触发所有单点手势（tap、swipe 等）。这产生了一个手势系统，该系统可以在各种设备上无缝工作，而与输入类型无关。

Ext JS 当前支持以下手势

指针类型

在某些情况下，应用程序只需要监听由特定类型的输入（鼠标或触摸）触发的手势，而忽略另一种。Ext JS 在事件对象上提供了一个 pointerType 属性，用于检测导致事件的输入类型

el.on('drag', function(e) {
    if (e.pointerType === 'touch') {
        // only handle touch-drag, and ignore mouse-drag
    }
});

事件传播

事件在框架中传播的方式与 DOM 事件在浏览器中自然传播的方式非常相似。不同之处在于，框架使用委托事件模型来支持手势识别。这意味着事件在 DOM 级别完成传播后，在单独的传播阶段传递到 DOM 元素。

原生传播

直接附加到 DOM 元素的事件侦听器将在浏览器通过 DOM 层次结构传播事件时被调用。虽然了解原生传播的机制很有帮助，但在 Ext JS 中通常应避免直接附加的 DOM 侦听器，原因如下

• 直接侦听器与其他侦听器按顺序触发
• 从直接附加的侦听器调用 stopPropagation 可能会阻止手势识别的发生，并阻止随后的合成传播。

但是，在某些情况下，可能需要将侦听器直接附加到 DOM 元素，例如，在使用 Ext JS 与其他框架一起使用时解决问题。这可以使用 delegated 事件选项来完成。

el.on({
    mousedown: function() {
        Ext.Msg.alert('mousedown fired - native capture phase');
    },
    // careful when using delegated: false! this can have unintended side effects
    delegated: false,
    // use the capture option to listen in the capture phase
    capture: true
});

DOM 级别传播分两个阶段进行。首先是捕获阶段，其中事件从 DOM 顶部（从 window 对象开始）一直向下分派到作为事件目标的元素。在捕获阶段之后，发生冒泡阶段，其中事件首先传递到目标元素，然后传递到其祖先，直到到达层次结构的顶部。默认情况下，侦听器在传播的冒泡阶段触发，但感兴趣的各方可以使用 capture 事件选项在捕获阶段进行侦听。

手势识别

在原生事件冒泡到 window 对象后，Ext JS 执行手势识别。然后，它可能会合成一个或多个手势事件，然后这些事件必须在整个 DOM 中传播。

合成传播

在手势识别步骤完成后，框架将分派原始 DOM 事件（例如 mousedown 或 touchmove）以及任何手势事件（例如 drag 或 swipe），这些手势事件被识别为 DOM 事件的结果。与原生传播一样，合成传播也分两个阶段进行，即捕获阶段和冒泡阶段。

合成传播是框架内所有事件侦听器的默认设置，建议用于使用 Ext JS 的应用程序。使用合成传播可确保事件与其他事件按正确顺序触发，并避免因某种原因停止传播时出现意外。开发人员无需执行任何操作即可启用合成传播 - 以下侦听器使用合成传播

el.on('mousedown', function() {
    Ext.Msg.alert('mousedown fired - synthetic bubble phase');
});

同样，capture 选项可用于在捕获阶段进行侦听

el.on({
    mousedown: function() {
        Ext.Msg.alert('mousedown fired - synthetic capture phase');
    },
    capture: true
});

停止传播

可以在原生或合成传播期间的任何点停止传播，无论是在捕获阶段还是冒泡阶段。这可以防止事件分派到尚未接收到它的任何元素，并防止任何挂起的捕获或冒泡阶段执行。

例如，在事件分派到元素时停止传播将阻止事件冒泡到该元素的父级

parentEl.on('mousedown', function() {
    // never fires because child element in bubble phase stops propagation of mousedown
    Ext.Msg.alert('mousedown fired on child');
});

el.on('mousedown', function(e) {
    Ext.Msg.alert('mousedown fired on child');

    // immediately stop propagating the event any further
    e.stopPropagation();
});

在捕获阶段停止传播会取消整个冒泡阶段。

el.on({
    mousedown: function(e) {
        Ext.Msg.alert('mousedown - capture phase');

        // stopping propagation during the capture phase causes the entire
        // bubble phase to be skipped
        e.stopPropagation();
    },
    capture: true
});

el.on('mousedown', function() {
    // never fires because propagation of mousedown event was stopped prior to
    // bubble phase
    Ext.Msg.alert('mousedown - bubble phase');
});

手势传播

当手势事件被识别时，它会与从中合成它的原生事件一起通过 DOM 层次结构传播。在某些情况下，可以同时识别多个手势。当这种情况发生时，手势会以一组捕获/冒泡阶段一起传播。

例如，考虑一个 DOM 层次结构，其中元素“A”包含元素“B”，而元素“B”又包含元素“C”。假设在最内层元素“C”上触发了 touchmove 事件，并且此 touchmove 事件满足 drag 和 swipe 手势的标准。

在识别到 drag 和 swipe 都在发生时，手势发布者会发布 touchmove、dragstart 和 swipestart 事件，并将所有三个事件传递给层次结构中的每个元素。

声明手势

有时，同一层次结构中的元素可能会监听冲突的手势。在上面的示例中，假设元素 A 正在监听 swipe，而其子元素 B 正在监听 drag。当元素 B 处理 dragstart 事件时，它可能希望阻止将当前手势解释为 swipe，因为元素 A 的 swipe 处理程序可能会干扰元素 B 的 drag 处理程序。为此，它必须通过调用事件对象上的 claimGesture 方法来“声明”拖动手势。

el.on('dragstart', function(e) {
    e.claimGesture();
});

一旦在 dragstart 事件对象上调用了 claimGesture，该手势将被视为 drag 手势，直到其持续时间的剩余时间（直到用户抬起手指或释放鼠标按钮）。与 swipe 手势关联的所有事件（swipestart、swipe、swipeend）将停止触发。此外，由于 swipe 事件被取消，因此 swipecancel 事件将传递到传播层次结构中的每个元素。

浏览器处理的手势（触摸操作）

浏览器会自动处理某些触摸手势，并响应执行默认操作，例如滚动或缩放。这些操作称为“触摸操作”。浏览器通常实现以下触摸操作

实现自己处理这些手势中任何一个的 Ext JS 应用程序可能需要在处理手势时禁用浏览器的一个或多个默认触摸操作。例如，可拖动元素很可能希望在拖动时阻止其容器滚动。这可以通过设置元素的 touchAction 来实现。

// instruct the browser not to scroll while "el" is being dragged
el.setTouchAction({
    panX: false,
    panY: false
});

Ext JS 中的触摸操作概念是仿照 CSS touch-action 属性建模的，并支持相同的值。在底层，框架在支持 CSS touch-action 的地方（在实现 Pointer Events 的浏览器上）使用 CSS touch-action，并在 Touch Events 浏览器上模拟相同的行为。

在处理组件时，通常应避免直接在其元素上调用 setTouchAction，而应使用组件的 touchAction 配置。例如，以下面板的主元素不允许浏览器垂直滚动，并且其 body 元素不允许双指缩放或垂直滚动，因为它通过 DOM 继承了其父节点的 touchAction。

Ext.create('Ext.panel.Panel', {
    touchAction: {
        panY: false,
        body: {
            pinchZoom: false
        }
    },
    listeners: {
        drag: function(e) {
            // handle drag on the panel's main element
        },
        pinch: {
            element: 'body',
            fn: function(e) {
                // handle pinch on the panel's body element
            }
        }
    }
});

长按拖动

在触摸设备上，有时很难确定触摸是应该滚动还是拖动对象。确定意图的一种常见方法是时间阈值。按住元素足够长的时间，手势将转换为拖动而不是滚动。现在可以使用 longpress 事件上提供的新 startDrag 方法来完成此操作。

el.on('longpress', function(e) {
    e.startDrag();
});

在 Pointer Events 浏览器（IE 和 Edge）上，还必须在元素上设置适当的触摸操作，以防止浏览器在拖动元素时滚动

el.setTouchAction({
    panX: false,
    panY: false
});

在 Touch Events 浏览器（Chrome 和 Safari）上，无需配置元素的触摸操作即可防止滚动。相反，可以调用 drag 事件对象上的 preventDefault 来阻止滚动发生

el.on('drag', function(e) {
    e.preventDefault();
});

虽然 preventDefault 方法来防止滚动在 Pointer Events 浏览器上不起作用，但在 Touch Events 浏览器上，它的优势在于允许在运行时确定是否滚动，而不是必须预先指定触摸操作。对于只需要支持 Touch Events 浏览器的应用程序，这可能是一种有用的技术，但是，对于跨平台应用程序，必须使用 touchAction 来防止滚动。

视口缩放

本指南假定您的应用程序中已启用视口缩放。这通常通过将以下 meta 标记添加到您的 html 页面来完成

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">

希望禁用视口缩放的应用程序应将该 meta 标记替换为以下标记

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

我们建议始终启用视口缩放，因为它提高了视力受损用户的可访问性。