`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>

创建自定义事件