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

我试图创建触发第二个事件的jQuery事件。第一个事件是点击引用图像的表情符号。第二个是在页面周围移动图像的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);`

来源

2015-10-15 quidproquo

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

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

来源

2015-10-15 17:23:47

它不能正常工作，因为连接体处理程序立即触发。 –

我可能是错的 - 但为什么它触发如果你传递一个函数引用的事件对象？ –

事件从'＃emoji'传播到'body'。从'＃emoji'点击处理程序存在后，事件会传播到'stop（）'，因为它已经连接。 –

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

您可能需要一次性使用某些事件。这可以通过使用.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);

来源

2015-10-15 17:55:08

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

回答

相关问题