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

Creating an event that triggers a second event

本文关键字：事件 第二个 创建      更新时间：2023-09-26

我正在尝试创建一个触发第二个事件的jQuery事件。第一件事是点击指向图片的表情符号id。第二个是鼠标移动事件，它在页面上移动图像。当鼠标再次单击页面主体的任何位置并将图像放置在该绝对位置时，第三个事件将停止此事件。我能够让第二个和第三个事件工作，但我不能让第一个事件与第二个一起工作。以下是目前为止我为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);`

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

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

在点击#emoji的过程中，body click even也被触发。这导致调用stop()。该事件向body的传播可以被event.stopPropagation()阻止(或等价地从begin()返回false)。即使在begin()中附加了body on click处理程序，也应该手动停止传播。

您可能希望一次性使用某些事件。这可以通过使用.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);
相关文章：