查询 : Popover onclick event

Question

我一直坚持这一点，为了在 Jquery 的超链接点击中显示 HTMl 的特定 div，我尝试了以下代码但没有得到答案，

$(function() {
    var moveLeft = 20;
    var moveDown = 10;

    $('a#trigger').click(function(e) {
        $('div#pop-up').show()
            .css('top', e.pageY + moveDown)
            .css('left', e.pageX + moveLeft)
            .appendTo('body');
        }, function() {
            $('div#pop-up').hide();
    });
    $('a#trigger').mousemove(function(e) {
        $("div#pop-up").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
    });
});  

我在这里尝试了 hover() 方法，而不是 click() 方法，它在我放置 click() 时起作用 它不会，但我需要 click() 方法才能工作，我该如何实现呢？请帮助...

Answer 1

因为与 hover() 不同，click() 方法仅支持单个处理程序。
看到这个: http://api.jquery.com/click/

因此，在您的情况下，请注意代码片段:

                $('a#trigger').click(function(e) {
                    $('div#pop-up').show()
                    .css('top', e.pageY + moveDown)
                    .css('left', e.pageX + moveLeft)
                    .appendTo('body');
                }, function() {
                    $('div#pop-up').hide();
                });

您打算在点击时执行的第一个函数实际上作为无意义的事件数据传递。 每次您单击#trigger 时，都会执行第二个函数。

您也可以这样编码:

var triggerState = 0;
$('a#trigger').click(function(e) {
    if (triggerState === 0) {
        $('div#pop-up').show()
        .css('top', e.pageY + moveDown)
        .css('left', e.pageX + moveLeft)
        .appendTo('body');
        triggerState = 1;
    }
    else if (triggerState === 1) {
        $('div#pop-up').hide();
        triggerState = 0;
    }
});

我认为您错误地认为单击(如悬停)接受不同状态的两个函数 - 不幸的是没有 - mouseover 和 mouseout 是明确的状态可跟踪的，但是，“交替点击”不是明确的状态可跟踪的，因此 jQuery点击不提供此功能。