jquery悬停功能需要帮助

Question

我的页面中有一次跨度。我使用悬停功能在鼠标悬停时显示一个弹出窗口，并在鼠标移开后自动隐藏该弹出窗口。我的代码在下面，它工作正常。

我需要的是，如果我单击跨度，弹出窗口应该冻结，并且只有当我关闭弹出窗口时它必须关闭。但是悬停也应该起作用。我需要同时使用悬停和单击功能..

我的悬停代码：

$('td#' + parentElement).find('span.likes').hover(function (e) {
    topPos = e.pageY - ($('div#pop-up').height()) - 35;
    leftPos = e.pageX - ($('div#pop-up').width()) - 30;
    if (leftPos < 0) {
        leftPos = 10;
    }
    GetLikesList(json_row.value.task_id);
    $('div#pop-up').show().css('top', topPos).css('left', leftPos).appendTo('body');
    $('#mopopuptitle').html('People who liked this Request');
}, function () {
    $('div#pop-up').hide();
});

我的点击代码：

$('#' + parentElement).find('span.likes').click(function (e) {
    topPos = e.pageY - ($('div#pop-up').height()) - 35;
    leftPos = e.pageX - ($('div#pop-up').width()) - 30;
    if (leftPos < 0) {
        leftPos = 10;
    }
    GetLikesList(json_row.value.task_id);
    $('div#pop-up').show().css('top', topPos).css('left', leftPos).appendTo('body');
    $('#mopopuptitle').html('People who liked this Request');
    e.stopPropagation();
})

如何整合两者？？？

Answer 1

可以使用.on()绑定多个事件：

$('#' + parentElement).find('span.likes').on('mouseenter click', function(e) {
    topPos = e.pageY - ($('div#pop-up').height()) - 35;
    leftPos = e.pageX - ($('div#pop-up').width()) - 30;

    if (leftPos < 0) {
        leftPos = 10;
    }

    GetLikesList(json_row.value.task_id);

    $('div#pop-up').show().css({
        top: topPos,
        left: leftPos
    }).appendTo('body');

    $('#mopopuptitle').html('People who liked this Request');
}).on('mouseleave', function () {
    $('div#pop-up').hide();
});

虽然我没有看到绑定两者有多大用处，除非你想运行处理程序两次。要点击元素，鼠标必须悬停在它上面。