0

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

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

我的悬停代码： 

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

两者如何结合？？？

4

1 回答 1

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

尽管除非您想运行处理程序两次，否则我认为绑定两者没有多大用处。要单击元素，鼠标必须悬停在它上面。

于 2012-10-08T06:22:12.757 回答