手势

除了标准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 的顶部分发到每个元素，从窗口对象开始，一直到事件的目标元素。在捕获阶段之后，发生冒泡阶段，其中事件首先传递给目标元素，然后传递给它的祖先，直到到达层次结构的顶部。默认情况下，侦听器在传播的冒泡阶段触发，但相关方可以使用 capture 事件选项在捕获阶段进行侦听。

手势识别

在本机事件冒泡到窗口对象后，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（在实现 指针事件 的浏览器上），并在 触摸事件 浏览器上模拟相同行为。

在处理组件时，通常应避免直接在其元素上调用 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();
});

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

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

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

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

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

视口缩放

本指南假设在应用程序中启用了视口缩放。这通常是通过将以下元标记添加到 html 页面来完成的

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

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

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

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