jquery - 具有多个显示事件的 qTip2 不起作用

Question

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

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

Answer 1

我遇到了同样的问题，我可以通过替换 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);
};