472,805 Members | 2,117 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,805 software developers and data experts.

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

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
5 7865
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Jeroni Paul | last post by:
<BODY onmousemove="return false;" oncontextmenu="return false;"> <IMG src="button.gif" onmouseover="this.src='down.gif'" onmouseout="this.src='button.gif'"> </BODY> This simple example shows...
0
by: NB | last post by:
Hi A part of my application involves management of stocks in the warehouse. Incoming/outgoing transactions, stocktake, quantity on hand have all been satisfactorily managed. The app has run...
1
by: vulgate | last post by:
i use arg.button==( MouseButtons.Left+MouseButtons.Right) but the system promote the the type cant + who can help me ~
6
by: jcrouse | last post by:
I have the following mouse events assigned to a label control. Is the a way I can tell which mouse button the users has clicked with? Private Sub lblP1JoyUp_Click(ByVal sender As System.Object,...
14
by: effendi | last post by:
Is it possible for me to disable the wheel scroll in a mouse when user click on a drop-down list? Thanks
5
by: EggHead | last post by:
Hi all, My development environment is VB 6.0, and my OS is winxp. I would like to know how to find the mouse location at a control when the mouse is point at that control. The problem is that the...
2
by: hini | last post by:
Hi all, I use IE, and I am trying to display a tooltip using javascript. the problem is that the tooltip is not apearing where I want it to be. I am getting the mouse location using clientX and...
1
by: kristu | last post by:
Hi i have a button array of . know i want that when i press a button, i get the location of the button in the array, not which button is pressed but the location.I used the sender to do a...
0
linyimin
by: linyimin | last post by:
Spring Startup Analyzer generates an interactive Spring application startup report that lets you understand what contributes to the application startup time and helps to optimize it. Support for...
0
by: kcodez | last post by:
As a H5 game development enthusiast, I recently wrote a very interesting little game - Toy Claw ((http://claw.kjeek.com/))。Here I will summarize and share the development experience here, and hope it...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Sept 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
0
by: Taofi | last post by:
I try to insert a new record but the error message says the number of query names and destination fields are not the same This are my field names ID, Budgeted, Actual, Status and Differences ...
14
DJRhino1175
by: DJRhino1175 | last post by:
When I run this code I get an error, its Run-time error# 424 Object required...This is my first attempt at doing something like this. I test the entire code and it worked until I added this - If...
0
by: Rina0 | last post by:
I am looking for a Python code to find the longest common subsequence of two strings. I found this blog post that describes the length of longest common subsequence problem and provides a solution in...
5
by: DJRhino | last post by:
Private Sub CboDrawingID_BeforeUpdate(Cancel As Integer) If = 310029923 Or 310030138 Or 310030152 Or 310030346 Or 310030348 Or _ 310030356 Or 310030359 Or 310030362 Or...
0
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
0
by: Mushico | last post by:
How to calculate date of retirement from date of birth

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.