Shift-click, control-click

P

Paul Cooper

Dear All,

I am working on a piece of Javascript code that needs to detect a
mouse-click, shift-click and control-click. The code is not my own -
it is a part of a much larger suite of routines. The code as it stands
does not work in Firefox, and I suspect that the task of feature
detection (which currently depends on browser detection) can be
carried out better. The result should be that opcode is set to 0,1 or
2 dor click, control-click and shift-click. I post the entire function
below.

Thanks

Paul

function click(e)
{
if(!e)
e=window.event;
var mX=null;
var mY=null;
var opcode = 0; //0=zoom in, 1=zoom to extent (ctrl), 2=pan
(shift)
var op=navigator.userAgent.toLowerCase().indexOf('opera')!=-1;
var ie = document.all;
if (ie || op)
{
mX = e.offsetX;
mY = e.offsetY;
if (e.ctrlKey)
opcode = 1;
if (e.shiftKey)
{
opcode += 2;
}
}
else
{
mX = e.layerX;
mY = e.layerY;
if (e.modifiers & Event.CONTROL_MASK)
{
opcode = 1;
}
if (e.modifiers & Event.SHIFT_MASK)
{
opcode += 2;
}
}
if (opcode == 0)
{
this.zoom(mX,mY);
}
else if (opcode == 1)
{
this.zoomOut(mX,mY);
}
else if (opcode == 2)
{
this.pan(mX,mY);
}
else if (opcode == 3)
{
this.queryUI(mX,mY);
}
}
 
R

RobB

Paul said:
Dear All,

I am working on a piece of Javascript code that needs to detect a
mouse-click, shift-click and control-click. The code is not my own -
it is a part of a much larger suite of routines. The code as it stands
does not work in Firefox, and I suspect that the task of feature
detection (which currently depends on browser detection) can be
carried out better. The result should be that opcode is set to 0,1 or
2 dor click, control-click and shift-click. I post the entire function
below.

Thanks

Paul

function click(e)
{
if(!e)
e=window.event;
var mX=null;
var mY=null;
var opcode = 0; //0=zoom in, 1=zoom to extent (ctrl), 2=pan
(shift)
var op=navigator.userAgent.toLowerCase().indexOf('opera')!=-1;
var ie = document.all;
if (ie || op)
{
mX = e.offsetX;
mY = e.offsetY;
if (e.ctrlKey)
opcode = 1;
if (e.shiftKey)
{
opcode += 2;
}
}
else
{
mX = e.layerX;
mY = e.layerY;
if (e.modifiers & Event.CONTROL_MASK)
{
opcode = 1;
}
if (e.modifiers & Event.SHIFT_MASK)
{
opcode += 2;
}
}
if (opcode == 0)
{
this.zoom(mX,mY);
}
else if (opcode == 1)
{
this.zoomOut(mX,mY);
}
else if (opcode == 2)
{
this.pan(mX,mY);
}
else if (opcode == 3)
{
this.queryUI(mX,mY);
}
}
Click to expand...

Hi Paul.

Mouse/kb/event routines are always iffy cross-platform; test this if
interested.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>formatter</title>
<style type="text/css">

div#thingy {
width: 500px;
height: 360px;
margin: 80px auto;
border: thin black solid;
background: skyblue;
cursor: crosshair;
}
div#readout {
width: 150px;
height: 13px;
font: 11px arial;
text-align: center;
padding-bottom: 1px;
margin: 20px;
border: 1px black solid;
background: silver;
}

</style>
<script type="text/javascript">

function getOffIt(e, obj)
{
var o = { offX: obj.offsetLeft, offY: obj.offsetTop };
while (obj && (obj = obj.offsetParent))
{
o.offX += obj.offsetLeft;
o.offY += obj.offsetTop;
}
if ('undefined' != typeof e.pageX)
{
o.offX = e.pageX - o.offX;
o.offY = e.pageY - o.offY;
}
else if ('undefined' != typeof e.clientX)
{
o.offX = e.clientX - o.offX;
o.offY = e.clientY - o.offY;
}
else return null;
return o;
}

function click(e)
{
var tgt, o, opcode = 0;
if ((e = e || window.event)
&& (tgt = e.srcElement || e.target)
&& (o = getOffIt(e, tgt)))
{
var mX = o.offX;
var mY = o.offY;
opcode += (e.ctrlKey && 1) + (e.shiftKey && 2);
switch (opcode)
{
case 0 :
stat('zoom', mX, mY);
//this.zoom(mX, mY);
break;
case 1 :
stat('zoomOut', mX, mY);
//this.zoomOut(mX, mY);
break;
case 2 :
stat('pan', mX, mY);
//this.pan(mX, mY);
break;
case 3 :
stat('queryUI', mX, mY);
//this.queryUI(mX, mY);
break;
default:
break;
}
}
if (e.cancelBubble)
{
e.cancelBubble = true;
e.returnValue = false;
}
else if (e.preventDefault)
e.preventDefault();
}

function stat(op, mX, mY)
{
var el = document.getElementById('readout');
el.innerHTML = op + ' | mX: ' + mX + ' | mY: ' + mY;
}

window.onload = function()
{
var el;
if (document.getElementById
&& (el = document.getElementById('thingy')))
{
if (el.attachEvent)
el.attachEvent('onclick', click);
else if (el.addEventListener)
el.addEventListener('click', click, true);
else el.onclick = click;
}
}

</script>
</head>
<body>
<div id="readout">op | x | y</div>
<div id="thingy"></div>
</body>
</html>
 
S

Stephen Chalmers

Paul Cooper said:
Dear All,

I am working on a piece of Javascript code that needs to detect a
mouse-click, shift-click and control-click. The code is not my own -
it is a part of a much larger suite of routines. The code as it stands
does not work in Firefox, and I suspect that the task of feature
detection (which currently depends on browser detection) can be
carried out better. The result should be that opcode is set to 0,1 or
2 dor click, control-click and shift-click.
Click to expand...
<snip>

The following code reports the modifier key status on NN4, Mozilla/Firefox,
Opera and I.E.
I could make it work universally for shift and ctrl only by using the
mousedown handler.
I'm not sure if the reported co-ordinates will be correct.


<HTML>
<HEAD>
</HEAD>
<BODY >

Mouse-down on page with modifier keys and read status line/title bar.

<SCRIPT>

function mClick(e)
{

if(typeof(e)=='undefined')
e=window.event||window.Event;

var mX=null;
var mY=null;
var opcode = 0; file://0=zoom in, 1=zoom to extent (ctrl), 2=pan(shift)

if ( typeof(e.offsetX)!='undefined' )
{
mX = e.offsetX;
mY = e.offsetY;
}
else
if(typeof(e.layerX)!='undefined')
{
mX = e.layerX;
mY = e.layerY;
}

if (typeof(e.ctrlKey)!='undefined')
{
if (e.ctrlKey)
opcode |= 1;
if (e.shiftKey)
opcode |= 2;
}
else
{
if (e.modifiers & Event.CONTROL_MASK)
opcode |=1;

if (e.modifiers & Event.SHIFT_MASK)
opcode |= 2;
}

window.status="opcode="+opcode+" window.event="+window.event+
" window.Event="+window.Event;
document.title="opcode="+opcode+" window.event="+window.event+
" window.Event="+window.Event;
}

if(window.Event)
document.captureEvents(Event.MOUSEDOWN)

document.onmousedown=mClick;

</SCRIPT>
</BODY>
</HTML>
 
I

Ivan Marsh

Dear All,

I am working on a piece of Javascript code that needs to detect a
mouse-click, shift-click and control-click. The code is not my own - it
is a part of a much larger suite of routines. The code as it stands does
not work in Firefox, and I suspect that the task of feature detection
(which currently depends on browser detection) can be carried out
better.
Click to expand...

I'm not surprised it doesn't work in Firefox. At the very least ctrl-click
(open link in new tab) and shift-click (open link in new window) are used
for functions in Firefox and won't get sent to the page itself no matter
what your code does.
 
P

Paul Cooper

I'm not surprised it doesn't work in Firefox. At the very least ctrl-click
(open link in new tab) and shift-click (open link in new window) are used
for functions in Firefox and won't get sent to the page itself no matter
what your code does.
Click to expand...


Well, I've got it working, so I am afraid you are wrong! I have done a
fairly simple modification of the code to make it work, but if you
think of it a mouse-click has an event attached to it. The event has
properties (in all browsers) that allow you to determine the state of
the control, shift and alt keys. My problem was simply that not all
browsers handle the event in the same way. I won't post my current
code as it still contains browser dependent code, but I'll post the
final version.

Paul
 
P

Paul Cooper

<snip>

The following code reports the modifier key status on NN4, Mozilla/Firefox,
Opera and I.E.
I could make it work universally for shift and ctrl only by using the
mousedown handler.
I'm not sure if the reported co-ordinates will be correct.


<HTML>
<HEAD>
</HEAD>
<BODY >

Mouse-down on page with modifier keys and read status line/title bar.

<SCRIPT>

function mClick(e)
{

if(typeof(e)=='undefined')
e=window.event||window.Event;

var mX=null;
var mY=null;
var opcode = 0; file://0=zoom in, 1=zoom to extent (ctrl), 2=pan(shift)

if ( typeof(e.offsetX)!='undefined' )
{
mX = e.offsetX;
mY = e.offsetY;
}
else
if(typeof(e.layerX)!='undefined')
{
mX = e.layerX;
mY = e.layerY;
}

if (typeof(e.ctrlKey)!='undefined')
{
if (e.ctrlKey)
opcode |= 1;
if (e.shiftKey)
opcode |= 2;
}
else
{
if (e.modifiers & Event.CONTROL_MASK)
opcode |=1;

if (e.modifiers & Event.SHIFT_MASK)
opcode |= 2;
}

window.status="opcode="+opcode+" window.event="+window.event+
" window.Event="+window.Event;
document.title="opcode="+opcode+" window.event="+window.event+
" window.Event="+window.Event;
}

if(window.Event)
document.captureEvents(Event.MOUSEDOWN)

document.onmousedown=mClick;

</SCRIPT>
</BODY>
</HTML>
Click to expand...


Thanks - this looks like just the thing I want.

Paul
 
S

Stephen Chalmers

Paul Cooper said:
On Mon, 25 Apr 2005 21:36:26 +0100, "Stephen Chalmers"


Thanks - this looks like just the thing I want.

Paul
Click to expand...

I'm glad it's of some use.
 
P

Paul Cooper

I'm glad it's of some use.
Click to expand...

I have just modified my code in line with your suggestion and so far
it looks good - your concerns about the X,Y positions seem to be
unfounded.

Paul
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Show text on-click with transition 2
.addEventListener('click', ...) on firefox 3 2
My Regexp XML Parser -> Structured Perl Data, Cut & Paste Version, No Module's (Vol I) 43
I Need Help with making a function that draws in a canvas using location data. 1
? Trouble with: passing dragElement(e.target.id); 8
I want to Display Excel As HTML In js 2
Uncaught TypeError using hammer.js 0
Java left shift and right shift operators. 38

Members online

Total: 27 (members: 1, guests: 26)
Robots: 473

Forum statistics

Threads
473,768
Messages
2,569,574
Members
45,051
Latest member
CarleyMcCr

Latest Threads

Top