`mousemove` and triggering a custom event

问题

In a mousemove event:

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

as you can see, we can use pageX and pageY to get the x and y co-ordinates of mouse position. But, what I want is to trigger a custom event of mine on mousemove and would like to get these pageX and pageY values in that custom event of mine. To be more clear, what I would like to do is:

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

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

Is there any way to access these pageX and pageY in myevent?

回答1:

.trigger() allows to pass additional data via its arguments. You can call

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

Now you have access to the whole original event object within your custom event code.

回答2:

Another option is to create a custom event like

$(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>

来源：https://stackoverflow.com/questions/26782333/mousemove-and-triggering-a-custom-event

标签

javascript

jquery

javascript-events