創建觸發第二個事件的事件

我試圖創建觸發第二個事件的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

創建觸發第二個事件的事件

回答

相關問題