CODEWITHSUNDEEP
javascriptjqueryjquery-events
Kamran Ahmed
Kamran Ahmed

Reputation: 12440

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

Upvotes: 0

Views: 750

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388436

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>

Upvotes: 1

jAndy
jAndy

Reputation: 236152

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

Upvotes: 3

Related Questions