Question

我正在使用HammerJS来处理简单的拖放方案。我希望元素在我的边界框的某个区域内反弹，或者如果它在屏幕外，则缩小屏幕。我正在使用isFinal属性来确定何时调用回调函数，该函数处理弹回。问题是，我可能不清楚'pan'事件是如何工作的，除非在释放鼠标时元素仍在移动，否则它会被卡住并且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;
                    }
                });
            }
        }
    });

Answer 1

当鼠标被释放时，

afaik isFinal为true。但我想，这不是处理它的方法。发现这个：

“isFirst和isFinal是一种内部属性，由Hammer使用，但无论如何都暴露（不伤害）”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) {

到

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

当您考虑时，是时候设置isFinal true（根据您自己的规则和信仰）：

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

也许，你想在回调中再次将属性设置为false。

Answer 2

我遇到了同样的问题，即isFinal在底盘结束时无法可靠显示。只需将“ panend”添加到我在处理程序中正在侦听的事件即可解决此问题。现在看起来像这样，并且可以100％地起作用：

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

Answer 3

在IOS 13中请注意panend和isFinal may not be triggered，如果您也不是在听pancancel。

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

Answer 4

<script>
  document.body.addEventListener('touchmove',
                                 function(e) {e.preventDefault()},
                                 {passive: false})
</script>

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

4 个答案: