By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,836 Members | 2,023 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,836 IT Pros & Developers. It's quick & easy.

Mouse Location (x,y) Tracking with Left Button Down

P: n/a
gsb

I track the mouse location like this code:
function mousePos(e) {
var p = new Object();
if(e) { p.x = e.pageX; p.y = e.pageY; }
else { p.x = event.x; p.y = event.y; }
... (show)
}
document.onmousemove=mousePos;

Seems to do fine on many browsers.
However, this does not track the mouse position when the left mouse button
is held down.

What changes will I need to track the mouse position when the left mouse
button is depressed and held down while moving the mouse?

Your help is appreciated.

Thanks,

gsb
Jul 23 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
gsb wrote:
I track the mouse location like this code:
function mousePos(e) {
var p = new Object();
if(e) { p.x = e.pageX; p.y = e.pageY; }
else { p.x = event.x; p.y = event.y; }
... (show)
}
document.onmousemove=mousePos;

Seems to do fine on many browsers.
However, this does not track the mouse position when the left mouse button
is held down.

What changes will I need to track the mouse position when the left mouse
button is depressed and held down while moving the mouse?

Your help is appreciated.

Thanks,

gsb

I gather you are tring to implyment some drag drop feature or a
selection feature.

If I am honest I don't use document.onmousemove = function
MouseMoveEventHandler(){ } all the time I only enable it when I am
intrested in the mouse movement if if it enters a region of if the
button is depresed. At tha point i assign the event handler but i
normally assign it to document.body.onmousemnove as below.
------------ SAMPLE CODE -------------

//Set Focus
document.body.onmousemove = function (e)
{
if( window.attachEvent ){ e = event; } // For IE only
// e.clientY
// e.clientX
}

// Remove Focus
document.body.onmousemove = null;

---------------------------------------

As I said I don't like the idea of the script calculating the position
of the continualy, and only do it when I need to work with it's movement.

HTH

Andy
Jul 23 '05 #2

P: n/a
gsb
Thanks for the quick response Andy.
And if I am not mistaken, I have learned from some of your earlier works in
the DHTML area on the web. Thanks.

I agree and these codes are activated via a mouse down on an element.
They are to be removed upon the mouse release.
So tracking is only during the "dragging" state.

And that is why my question for my attempt at tracking, currently for
testing, worked with mouse over/out but not mouse down/up.

And as you guessed, it is a dragging scheme I have in mind but was trying to
distill the question down for the post.

IE is nice but I am also trying to be as "cross-browser" compliant as
possible.

Again thanks and any further suggestions will be appreciated.

gsb
Jul 23 '05 #3

P: n/a
gsb wrote:
Thanks for the quick response Andy.
And if I am not mistaken, I have learned from some of your earlier works in
the DHTML area on the web. Thanks.

I agree and these codes are activated via a mouse down on an element.
They are to be removed upon the mouse release.
So tracking is only during the "dragging" state.

And that is why my question for my attempt at tracking, currently for
testing, worked with mouse over/out but not mouse down/up.

And as you guessed, it is a dragging scheme I have in mind but was trying to
distill the question down for the post.

IE is nice but I am also trying to be as "cross-browser" compliant as
possible.

Again thanks and any further suggestions will be appreciated.

gsb

Hello

No probs, I gather for your response that you were unable to get it working?

The code snippit in my last post was for X-browser the if(
window.attachEvent ){ e = event; } is testing for IE and assigning the
event object to the e param passed to the function in the way mozilla
handles it.

I have knocked up a very simple x-browser example below. Sorry about
the wrapping if you'd like a better copy email me and I will send you one.

HTH

Andy
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Drag Demo</title>

<script>
// Array to hold starting point of mouse in relation to
// the Element the is being moved.
var MousePosition = [0,0];

// Just debuging and to show mouse pointer values.
var eDebug = null;
var nDebugLine = 0;
var lDebug = true;

function init()
{
// Create and append an element the will be draged
// it doesn't have to be created like this i just
// prefer to create elements this way.
var eElement = document.createElement("div");
eElement.appendChild( document.createTextNode("DragMe!") );
eElement.id = "Element 1";
eElement.className = "DragableElement"
document.body.appendChild( eElement );

// Attach to the onmousedown event to enable draging;
eElement.onmousedown = function ( e )
{
// Browser Check
if( window.attachEvent )
{
// IE assign the X & Y cords of the mouse pointer
// in relation to top left of the element
MousePosition[0] = event.offsetX;
MousePosition[1] = event.offsetY;
}
else
{
// Same for For gecko browsers
MousePosition[0] = e.layerX;
MousePosition[1] = e.layerY;
}

EnableDrag( this );
}

// Attach to the onmouseout event to disable the draging.
eElement.onmouseup = function ()
{
DisableDrag( this );
}

// Just for Showing pointer values
eDebug = document.getElementById( "debug" );

}

function EnableDrag( eElement )
{
WriteToDebug("Drag is Enabled for : " + eElement.id + " || Mouse
Position : " + MousePosition);

// Attach to the onmousemove event
document.body.onmousemove = function(e)
{
if( window.attachEvent ){ e = event; } // IE test
WriteToDebug("e.clientY : " + e.clientY + " || " + "e.clientX : " +
e.clientX + " || Mouse Position : " + MousePosition);

// Moving the Element. e.client# it the position of the mouse pointer
// in relation to top left of the viewable area hence the subtraction
// of MousePosition[#].
eElement.style.left = e.clientX - MousePosition[0] + "px";
eElement.style.top = e.clientY - MousePosition[1] + "px";
}

// Making onselectstart retun false stops the selection of text
// while the mouse is moving.
document.body.onselectstart = function(){ return false; };
}

function DisableDrag( eElement )
{
WriteToDebug( "Drag has beed disabled for : " + eElement.id );
// UnAttach the onmousemouse and onselectstart events
document.body.onmousemove = null;
document.body.onselectstart = null;
}
function WriteToDebug( cText )
{
if( lDebug )
{
eLine = document.createElement( "div" );
eLine.appendChild( document.createTextNode( nDebugLine + " : "+
cText ));
eDebug.insertBefore( eLine, eDebug.firstChild );
nDebugLine++;
}
}

</script>

<style>
.DragableElement {position:absolute; top:100px; left:100px;
width:100px; height:100px; border:solid 1px black;
background-color:ButtonFace; padding:10px; }
#debug{ position:absolute; bottom:0px; right:0px; height:100px;
width:400px; color:black; background-color:AppWorkspace; overflow:auto;
font-size:.6em; padding:10px; border:inset 1px AppWorkspace;}
</style>

</head>
<body onload="init()">
<div id="debug">

</div>

</body>
</html>
Jul 23 '05 #4

P: n/a
Andrew Scott wrote:
<snip>
//Set Focus
document.body.onmousemove = function (e)
{
if( window.attachEvent ){ e = event; } // For IE only

<snip>

Why this stupidly indirect test? IE is not the only browser that
implements window.attachEvent, and browsers following IE's event model
may not necessarily implement it (and IE 4 doesn't).

There is an obvious subject available for a test that will tell you
exactly what you want to know, reliably and directly, and that subject
is the functions - e - parameter. If it is a reference to an object then
the event object has been passed to the function as an argument, and if
it is not a reference to an object then the event object must be sought
elsewhere. So:-

if(!e){
e = window.event;
}
if(e){
... // We have our event object.
}
- or simply:-

e = e || window.event;
if(e){
... // We have our event object.
}

- or (potentially more obscurely):-

if((e = e || window.event)){
... // We have our event object.
}
- and no dubious inferences are necessarily in determining what to do.

All feature testing should be done as close as possible to the feature
that is the subject of the test, preferably with a direct one-to-one
relationship to that feature. When the feature is that a function may or
may not be passed a particular parameter the right test is applied
directly to the nature of that parameter.

Richard.
Jul 23 '05 #5

P: n/a
Richard Cornford wrote:
Andrew Scott wrote:
<snip>
//Set Focus
document.body.onmousemove = function (e)
{
if( window.attachEvent ){ e = event; } // For IE only


<snip>

Why this stupidly indirect test? IE is not the only browser that
implements window.attachEvent, and browsers following IE's event model
may not necessarily implement it (and IE 4 doesn't).

There is an obvious subject available for a test that will tell you
exactly what you want to know, reliably and directly, and that subject
is the functions - e - parameter. If it is a reference to an object then
the event object has been passed to the function as an argument, and if
it is not a reference to an object then the event object must be sought
elsewhere. So:-

if(!e){
e = window.event;
}
if(e){
... // We have our event object.
}
- or simply:-

e = e || window.event;
if(e){
... // We have our event object.
}

- or (potentially more obscurely):-

if((e = e || window.event)){
... // We have our event object.
}
- and no dubious inferences are necessarily in determining what to do.

All feature testing should be done as close as possible to the feature
that is the subject of the test, preferably with a direct one-to-one
relationship to that feature. When the feature is that a function may or
may not be passed a particular parameter the right test is applied
directly to the nature of that parameter.

Richard.

Hi Richard

Indeed, and that is the that I do it.

And I shouldn't have posted such a simple example that was only ever
designed to be compliant for IE and FF.

Even though it did exactally what I said it would!

Andy
Jul 23 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.