Hammerjs中的pan事件的isFinal属性是由什么触发的？

Question

我正在使用HammerJS处理简单的拖放场景。当元素位于边界框的某个区域内时，我希望它能弹回；如果不在该区域内，则可以缩小并从屏幕上离开。我使用isFinal属性来确定何时调用回调函数，该函数处理反弹。问题是，除非元素在鼠标释放时仍在移动，否则它会被卡住，isFinal属性保持为false。因此，我需要找出如何在任何时候释放元素时触发isFinal属性。

以下是代码以供参考。

    var registerNodeDraggable = function(oArgs) {
        if (!oArgs.id || !oArgs.el) { return; }

        var x = parseInt(oArgs.el.style.left,10) || 0;
        //var y = parseInt(oArgs.el.style.top,10) || 0;

        window[oArgs.id + 'Hammer'] = {
            hammer: new window.Hammer(oArgs.el),
            x: x,
            //y: y
    };

        var obj = window[oArgs.id + 'Hammer'];

        if (obj.hammer) {
            obj.hammer.on('panleft panright', function(e) {
                console.log(e);
                console.log(e.deltaTime);
                console.log(e.type);
                oArgs.el.style.left = obj.x + e.deltaX + 'px';
                // oArgs.el.style.top = obj.y + e.deltaY + 'px';
                if (e.isFinal && oArgs.callback) {
                    console.log('Is Final');
                    obj.x += e.deltaX;
                    //obj.y += e.deltaY;

                    oArgs.callback.call(this, e, obj);
                }
            });
        }
    };

    registerNodeDraggable({
        el: this.$ticker[0],
        id: 'swipe',
        callback: function(e, obj) {

            console.log('I am being called');

            //self.$ticker.velocity({opacity: 0});
            var $container = $('.tickerContainer');
            var offset = $container.offset();
            var tickerOffset = self.$ticker.position();
            var offsetRight = $container.width()  - self.$ticker.width() -  tickerOffset.left;
            var offsetBottom = $container.height() - self.$ticker.height() - tickerOffset.top;

            console.log(offsetRight + ' :Right');
            console.log(tickerOffset.left + ' :Left');


            if( offsetRight < -30 ){
                console.log('Bull');
                self.$ticker.velocity({translateX: 1000, opacity: 0},{duration: 250, complete: function(){
                    self.$ticker.velocity({ left:0, top: 0,  translateX: 0 }, {complete: function() {
                        obj.x = 0;
                        //obj.y = 0;
                         self.pick(self._nextTicker.ticker, 'Bull'); console.log('Bull');
                    } });
                } });

            } else if(tickerOffset.left < -30){
                console.log('Bear');
                self.$ticker.velocity({translateX: -1000, opacity: 0},{duration: 250, complete: function(){
                    self.$ticker.velocity({ left:0, top: 0,  translateX: 0 }, {complete: function() {
                        obj.x = 0;
                        //obj.y = 0;
                        self.pick(self._nextTicker.ticker, 'Bear'); console.log('Bear');
                    } });
                } });
            } else {
                self.$ticker.velocity({
                    left: 0,
                    top: 0 },
                    {duration: 250,
                    complete: function(){
                    obj.x = 0;
                    //obj.y = 0;
                    }
                });
            }
        }
    });

- Patrick Seamars

---

这个有什么见解吗？ - Alexandre Bourlier

我还没有得到任何东西。我仍然停留在之前的同一位置。 - Patrick Seamars

明白，我会继续寻找。如果我收集到任何关于此事的信息，我会通知您。 - Alexandre Bourlier

Answer 1

据我所知，当鼠标释放时，isFinal是true。但我认为这并不是处理它的方式。发现了这个：

"The isFirst and isFinal are kind of internal properties, used by Hammer, but exposed anyway (doesn't hurt)" 1 不要使用e.isFinal，请使用以下方法：

obj.hammer.on('panend',function(e){/*...*/});

但是，我认为您需要另一种方式来完成。 就我所理解的而言，您想要手动将 isFinal 属性设置为 true，以便触发“pandleft/right”处理程序的回调函数。

请尝试以下操作:

在初始化 Hammer 对象之后，添加一些自定义数据:

window[oArgs.id + 'Hammer'] = {
        hammer: new window.Hammer(oArgs.el),
        x: x,
        //y: y
};
window[oArgs.id + 'Hammer'].hammer.customData = {isFinal: false};

变更

if (e.isFinal && oArgs.callback) {

to

if (obj.hammer.customData.isFinal && oArgs.callback) {

当你认为是时候根据自己的规则和信仰将isFinal设置为true时：

window[oArgs.id + 'Hammer'].hammer.customData.isFinal = true;

也许，在您的回调函数中，您希望将属性再次设置为false。

- lukkysam

---

谢谢！“isFinal”没有起作用，我想知道为什么它在文档中。 - Kokodoko

Answer 2

注意，在IOS 13中，如果您没有监听pancancel，panend和isFinal可能不会被触发。

在撰写本文时，iOS 13刚刚发布-因此请确保测试12和13以获取不同的行为。

- Simon_Weaver

Answer 3

我之前也遇到了同样的问题，即在拖动结束时 isFinal 属性不能可靠地出现在事件中。只需要在监听器中将 'panend' 添加到所监听的事件列表中，问题就得到了解决。现在代码如下所示，可以100%地正常工作：

this.mc.on('panleft panright panend', event => {

- Mike Benna