Question

我试图创建一个触发第二个事件的jQuery事件。第一个事件是点击表示图像的表情符号id。第二个是mousemove事件，它在页面周围移动图像。第三个事件在页面正文中的任何位置再次发生鼠标单击并将图像置于该绝对位置时停止此事件。我能够让第二和第三个事件发挥作用，但我无法让第一个事件与第二个事件一起工作。这是我到目前为止我的jQuery：

var mouseTracker  = function(event) {
console.log(event.pageX, event.pageY, !!event.which)
$('#emoji').css('top', event.pageY);
$('#emoji').css('bottom', event.pageY);
$('#emoji').css('left', event.pageX);
$('#emoji').css('right', event.pageX);
}

var begin = function() {
$('body').on('mousemove', mouseTracker);
$('body').css('cursor', 'none');
}

var stop = function() {
$('body').off('mousemove', mouseTracker);
$('#emoji').css('postion', 'absolute')
$('body').css('cursor', 'default');
}

$('#emoji').on('click', begin);
$('body').on('click', stop);`

Answer 1

在第一个事件调用中初始化事件。

$('#emoji').on('click', function() {
    begin();
    $('body').on('click', stop);
});

Answer 2

在点击#emoji期间，也会触发身体点击甚至。这导致致电stop()。可以通过body（或event.stopPropagation()的等效返回false）阻止该事件向begin()的传播。即使body中附加了点击处理程序begin()，也应手动停止传播。

您可能希望一次性使用某些活动。这可以通过使用.one()进行绑定来完成。在这种情况下，处理程序在第一次使用后分离，无需手动.off()：

var begin = function (event) {        
    $('body').on('mousemove', mouseTracker);
    $('body').one('click', stop);
    $('body').css('cursor', 'none');
    return false; // event.stopPropagation();
}

var stop = function () {
    $('#emoji').one('click', begin);
    $('body').off('mousemove', mouseTracker);
    $('#emoji').css('postion', 'absolute')
    $('body').css('cursor', 'default');
}

$('#emoji').one('click', begin);

创建触发第二个事件的事件

2 个答案: