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();
});

虽然我没有看到很多用于绑定它们，除非你想要运行两次处理程序。要单击该元素，鼠标必须将鼠标悬停在该元素上。

在jquery悬停功能方面需要帮助

1 个答案: