JavaScript & jQuery Tutorials

JQ Home Right Arrow Objects Right Arrow event.clientX

event.clientX

Event object mouse position (X-axis) property.

Description

The event.clientX Event object property, contains the value of the mouse position relative to the left edge of the viewable window (X-axis).

Syntax


Signature Description
event.clientXThe value of the mouse position relative to the left edge of the viewable window (X-axis).

Parameters

None.

Return

A Number object.


event.clientX Example go to Objects Objects   go to top of page Top

Contains the value of the mouse position relative to the left edge of the viewable window (X-axis).

In the example below we show two new messages in the 'p' elements below every time the mouse moves over the image with the id of 'curry1'.

When the mouse moves while over the image, we trigger off the mousemove JavaScript event on the 'image'. This then fires off the $('#curry1').mousemove(function(){}) code which outputs the messages.




$(function(){
  $('#curry1').mousemove(function(event) {
    var pageCoords = '(' + event.pageX + ', ' + event.pageY + ' )';
    var viewableCoords = '(' + event.clientX + ', ' + event.clientY + ' )';
    $('#animspan1').text('( event.pageX, event.pageY ) : ' + pageCoords);
    $('#animspan2').text('( event.clientX, event.clientY ) : ' + viewableCoords);
  });

  $('#curry1').mousemove();
});



a picture of curry


The page coordinates are:

The viewable page coordinates are:



Related Tutorials

jQuery Advanced Tutorials - Lesson 5 - The Event Object



 

go to jQuery home page jQ Home go to Objects Objects go to top of page Top