Question

我刚开始使用Hammer.js作为可以在各种设备上使用的应用程序，我想给它最大的触摸和鼠标功能。在谷歌搜索了一下如何让Hammer识别鼠标的中间和右键并且没有找到答案之后，我编写了我自己的解决方案，它扩展了hammer.js并为鼠标触发的事件添加了一个“按钮”属性。请注意，如果要使用右键单击，则必须单独禁用上下文菜单。

如果有人有更好的解决方案，或发现任何错误，请继续发布...

Answer 1

//extend to allow right click
//input mouse map is not a public property of Hammer, so copy it here
var MOUSE_INPUT_MAP = {
    mousedown: Hammer.INPUT_START,
    mousemove: Hammer.INPUT_MOVE,
    mouseup: Hammer.INPUT_END
};
//override
Hammer.inherit(Hammer.MouseInput, Hammer.Input, {
    /**
     * handle mouse events
     * @param {Object} ev
     */
    handler: function MEhandler(ev) {
        var eventType = MOUSE_INPUT_MAP[ev.type];

        //modified to handle all buttons
        //left=0, middle=1, right=2
        if (eventType & Hammer.INPUT_START) {
            //firefox sends button 0 for mousemove, so store it here
            if(this.pressed === false) this.button = ev.button;
            this.pressed = true;
        }

        if (eventType & Hammer.INPUT_MOVE && ev.which === 0) {
            eventType = Hammer.INPUT_END;
        }
        // mouse must be down, and mouse events are allowed (see the TouchMouse input)
        if (!this.pressed || !this.allow) {
            return;
        }

        if (eventType & Hammer.INPUT_END) {
            this.pressed = false;
            this.button = false;
        }

        this.callback(this.manager, eventType, {
                        button: this.button,
            pointers: [ev],
            changedPointers: [ev],
            pointerType: 'mouse',
            srcEvent: ev
        });
    }
});

Answer 2

我必须为IE11和IE10做同样的工作。

Hammer.inherit(Hammer.PointerEventInput, Hammer.Input, {
    /**
     * handle mouse events
     * @param {Object} ev
     */
    handler: function PEhandler(ev) {


        var store = this.store;
        var removePointer = false;

        var eventTypeNormalized = ev.type.toLowerCase().replace('ms', '');
        var eventType = POINTER_INPUT_MAP[eventTypeNormalized];
        var pointerType = IE10_POINTER_TYPE_ENUM[ev.pointerType] || ev.pointerType;

        //modified to handle all buttons
        //left=0, middle=1, right=2
        if (eventType & Hammer.INPUT_START) {
            //firefox sends button 0 for mousemove, so store it here
            this.button = ev.button;
        }

        var isTouch = (pointerType == Hammer.INPUT_TYPE_TOUCH);

        // get index of the event in the store
        var storeIndex = inArray(store, ev.pointerId, 'pointerId');

        // start and mouse must be down
        if (eventType & Hammer.INPUT_START && (ev.button === 0 || ev.button === 1 || ev.button === 2 || isTouch)) {
            if (storeIndex < 0) {
                store.push(ev);
                storeIndex = store.length - 1;
            }
        } else if (eventType & (Hammer.INPUT_END | Hammer.INPUT_CANCEL)) {
            removePointer = true;
        }

        // it not found, so the pointer hasn't been down (so it's probably a hover)
        if (storeIndex < 0) {
            return;
        }

        // update the event in the store
        store[storeIndex] = ev;

        this.callback(this.manager, eventType, {
            button: this.button +1,
            pointers: store,
            changedPointers: [ev],
            pointerType: pointerType,
            srcEvent: ev
        });

        if (removePointer) {
            // remove from the store
            store.splice(storeIndex, 1);
        }
    }
});

希望它有所帮助。

Answer 3

此外，还添加了以下补丁来处理PointerEvents（还复制了Hammer不公开它们的必要值/函数）：

var POINTER_INPUT_MAP = {
    pointerdown: Hammer.INPUT_START,
    pointermove: Hammer.INPUT_MOVE,
    pointerup: Hammer.INPUT_END,
    pointercancel: Hammer.INPUT_CANCEL,
    pointerout: Hammer.INPUT_CANCEL
};

var INPUT_TYPE_TOUCH = 'touch';
var INPUT_TYPE_PEN = 'pen';
var INPUT_TYPE_MOUSE = 'mouse';
var INPUT_TYPE_KINECT = 'kinect';

// in IE10 the pointer types is defined as an enum
var IE10_POINTER_TYPE_ENUM = {
    2: INPUT_TYPE_TOUCH,
    3: INPUT_TYPE_PEN,
    4: INPUT_TYPE_MOUSE,
    5: INPUT_TYPE_KINECT // see https://twitter.com/jacobrossi/status/480596438489890816
};

/**
 * find if a array contains the object using indexOf or a simple polyFill
 * @param {Array} src
 * @param {String} find
 * @param {String} [findByKey]
 * @return {Boolean|Number} false when not found, or the index
 */
function inArray(src, find, findByKey) {
    if (src.indexOf && !findByKey) {
        return src.indexOf(find);
    } else {
        var i = 0;
        while (i < src.length) {
            if ((findByKey && src[i][findByKey] == find) || (!findByKey && src[i] === find)) {
                return i;
            }
            i++;
        }
        return -1;
    }
}

Hammer.inherit(Hammer.PointerEventInput, Hammer.Input, {
    /**
     * handle mouse events
     * @param {Object} ev
     */
    handler: function PEhandler(ev) {
        var store = this.store;
        var removePointer = false;

        var eventTypeNormalized = ev.type.toLowerCase().replace('ms', '');
        var eventType = POINTER_INPUT_MAP[eventTypeNormalized];
        var pointerType = IE10_POINTER_TYPE_ENUM[ev.pointerType] || ev.pointerType;

        //var isTouch = (pointerType == Hammer.INPUT_TYPE_TOUCH);

        // get index of the event in the store
        var storeIndex = inArray(store, ev.pointerId, 'pointerId');

        // start and mouse must be down
        if (eventType & Hammer.INPUT_START)
        {
            this.button = ev.button;
            if (storeIndex < 0) {
                store.push(ev);
                storeIndex = store.length - 1;
            }
        } else if (eventType & (Hammer.INPUT_END | Hammer.INPUT_CANCEL)) {
            this.button = false;
            removePointer = true;
        }

        // it not found, so the pointer hasn't been down (so it's probably a hover)
        if (storeIndex < 0) {
            return;
        }

        // update the event in the store
        store[storeIndex] = ev;

        this.callback(this.manager, eventType, {
            button: this.button,
            pointers: store,
            changedPointers: [ev],
            pointerType: pointerType,
            srcEvent: ev
        });

        if (removePointer) {
            // remove from the store
            store.splice(storeIndex, 1);
        }
    }
});

如何在Hammer.js中启用鼠标右键单击（和中键单击）

3 个答案: