Question

我想要一个带有取消的jQuery悬停。我有一个索引页面，我加载子页面。在索引页面上，我调用assignPopups（'a img'）。它用于在页面上显示弹出窗口。当我将鼠标悬停在标签上时，它可以正常工作。当我将子页面加载到索引页面时，我也从该页面调用assignPopups（'a'），这次只使用a标签。当我将鼠标悬停在子页面上的某个项目上时，即使我在显示之前将鼠标移开，弹出窗口也会显示出来。我看着取消事件运行，但弹出窗口仍然显示。如果我没有足够长的鼠标，有人可以告诉我如何有效的悬停不会显示弹出窗口。有一件事我想知道是否因为如果我在页面之间来回走动，代码将执行不止一次。有人能告诉我这是不是问题以及如何阻止它？

var timerPopup;

function assignPopups(selector) {
    $(selector).hover(
        function (e) {
            if ($(this).attr('title')) {
                $(this).data('title', $(this).attr('title'));
                $(this).removeAttr('title');
            }

            if ($(this).data('title')) {

                var bkgColor = $(this).closest("td").css("background-color");

                rgb2hex(bkgColor);

                if (bkgColor === null || bkgColor === undefined) {
                    bkgColor = "#4aacc5";
                }

                showPopupText(e, $(this).data('title'), bkgColor);
            }
        },
        function () {
            clearTimeout(timerPopup);
            $('div#titlePopup').remove();
        });
}


function showPopupText(e, mouseOverText, bkgColor) {
    timerPopup = setTimeout(function () {
        var html = '<div id="titlePopup" class="tooltip info" style="background-color:' + bkgColor + '; '
            + 'display: block;">'
            + '<span id="temp">' + mouseOverText + '</span>'
            + '</div>';
        $('div#titlePopup').remove();

        $('body').append(html);

        var htmlPopup = $("#titlePopup");

        $(htmlPopup).position({
            my: "left top",
            at: "left top",
            of: e
        });

    }, 1000);
}

Answer 1

我将#titlePopup从id更改为class，当调用$('.titlePopup').remove();时，它将删除此代码的所有实例。在调用$('.titlePopup').remove();后立即添加showPopupText()。

var timerPopup;
function assignPopups(selector) {
    $(selector).hover(
        function (e) {
            if ($(this).attr('title')) {
                $(this).data('title', $(this).attr('title'));
                $(this).removeAttr('title');
            }

            if ($(this).data('title')) {

                var bkgColor = $(this).closest("td").css("background-color");

                rgb2hex(bkgColor);

                if (bkgColor === null || bkgColor === undefined) {
                    bkgColor = "#4aacc5";
                }

                showPopupText(e, $(this).data('title'), bkgColor);
            }
        },
        function () {
            clearTimeout(timerPopup);
            $('.titlePopup').remove();
        });
}

function showPopupText(e, mouseOverText, bkgColor) {
    //Remove all other popups.
    $('.titlePopup').remove();
    timerPopup = setTimeout(function () {
        var html = '<div class="titlePopup tooltip info" style="background-color:' + bkgColor + '; '
            + 'display: block;">'
            + '<span id="temp">' + mouseOverText + '</span>'
            + '</div>';
        $('div#titlePopup').remove();

        $('body').append(html);

        var htmlPopup = $("#titlePopup");

        $(htmlPopup).position({
            my: "left top",
            at: "left top",
            of: e
        });

    }, 1000);
}

取消jQuery悬停

1 个答案: