`mousemove`和觸發自定義事件

Question

在mousemove事件：

$(document).on('mousemove', function(e){ 
    console.log(e.pageX); 
    console.log(e.pageY); 
}); 

，你可以看到，我們可以使用pageX和pageY得到的鼠標位置的x和y座標。但是，我想要的是在mousemove上觸發我的自定義事件，並希望在我的該自定義事件中獲得這些值pageX和pageY值。爲了更清楚，我想這樣做是：

$(document).on('mousemove', function(){ 
    $(document).trigger('myevent'); 
}); 

$(document).on('myevent', function(e){ 
    // console.log(e.pageX); 
    // console.log(e.pageY); 
}); 

有沒有辦法在myevent訪問這些pageX和pageY？

Answer 1

.trigger()允許通過其參數傳遞附加數據。您可以撥打

$(document).on('mousemove', function(event){ 
    $(document).trigger('myevent', event); 
}); 

現在您可以訪問自定義事件代碼中的整個原始event對象。

Answer 2

另一種選擇是像

$(document).on('mousemove', function(e) { 
 
    var event = $.Event('myevent', { 
 
    pageX: e.pageX, 
 
    pageY: e.pageY 
 
    }); 
 
    $(document).trigger(event); 
 
}); 
 

 
$(document).on('myevent', function(e) { 
 
    log(e.pageX + ':' + e.pageY) 
 
}); 
 

 
var log = function(message) { 
 
    var $log = $('#log'); 
 
    $log.html(message) 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="log"></div>

創建自定義事件