带有多个show事件的qTip2不起作用

时间:2015-06-19 14:19:49

标签: jquery qtip2

当我指定多个事件时,qTip2仅在单击时起作用。 Mouseenter或Focus单独工作正常,但我想确保它适用于所有事件,以防移动设备没有鼠标中心事件。

$('span#message').qtip({
    content: {
        text: 'some text'
    },
    show: {
        event: 'click mouseenter focus'
    },
    hide: {
        event: 'click mouseleave blur'
    }
});

1 个答案:

答案 0 :(得分:0)

我遇到了同样的问题,我可以通过替换jquery.qtip.js中的以下代码来解决此问题:

PROTOTYPE._bindEvents = function(showEvents, hideEvents, showTargets, hideTargets, showCallback, hideCallback) {
    // Get tasrgets that lye within both
    var similarTargets = showTargets.filter( hideTargets ).add( hideTargets.filter(showTargets) ),
        toggleEvents = [];

    // If hide and show targets are the same...
    if(similarTargets.length) {

        // Filter identical show/hide events
        $.each(hideEvents, function(i, type) {
            var showIndex = $.inArray(type, showEvents);

            // Both events are identical, remove from both hide and show events
            // and append to toggleEvents
            showIndex > -1 && toggleEvents.push( showEvents.splice( showIndex, 1 )[0] );
        });

        // Toggle events are special case of identical show/hide events, which happen in sequence
        if(toggleEvents.length) {
            // Bind toggle events to the similar targets
            this._bind(similarTargets, toggleEvents, function(event) {
                var state = this.rendered ? this.tooltip[0].offsetWidth > 0 : false;
                (state ? hideCallback : showCallback).call(this, event);
            });

            // Remove the similar targets from the regular show/hide bindings
            showTargets = showTargets.not(similarTargets);
            hideTargets = hideTargets.not(similarTargets);
        }
    }

    // Apply show/hide/toggle events
    this._bind(showTargets, showEvents, showCallback);
    this._bind(hideTargets, hideEvents, hideCallback);
};

收件人:

PROTOTYPE._bindEvents = function(showEvents, hideEvents, showTargets, hideTargets, showCallback, hideCallback) {
    // Get tasrgets that lye within both
    var similarTargets = showTargets.filter( hideTargets ).add( hideTargets.filter(showTargets) ),
        toggleEvents = [];

    // If hide and show targets are the same...
    if(similarTargets.length) {

        // Filter identical show/hide events
        $.each(hideEvents, function(i, type) {
            var showIndex = $.inArray(type, showEvents);

            // Both events are identical, remove from both hide and show events
            // and append to toggleEvents
            showIndex > -1 && toggleEvents.push(type);
        });
        showEvents = showEvents.filter((el) => !toggleEvents.includes(el));
        hideEvents = hideEvents.filter((el) => !toggleEvents.includes(el));

        // Toggle events are special case of identical show/hide events, which happen in sequence
        if(toggleEvents.length) {
            // Bind toggle events to the similar targets
            this._bind(similarTargets, toggleEvents, function(event) {
                var state = this.rendered ? this.tooltip[0].offsetWidth > 0 : false;
                (state ? hideCallback : showCallback).call(this, event);
            });
        }
    }

    // Apply show/hide/toggle events
    this._bind(showTargets, showEvents, showCallback);
    this._bind(hideTargets, hideEvents, hideCallback);
};