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

Shift-click, control-click

P: n/a
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('oper a')!=-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);
}
}

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


P: n/a
Paul Cooper wrote:
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('oper a')!=-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);
}
}


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>

Jul 23 '05 #2

P: n/a
Paul Cooper <pa*********@Nobasspam.ac.uk> wrote in message
news:3d********************************@4ax.com...
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.

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

--
Stephen Chalmers


Jul 23 '05 #3

P: n/a
On Mon, 25 Apr 2005 15:14:22 +0100, Paul Cooper wrote:
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.


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.

--
Life is short, but wide. -KV

Jul 23 '05 #4

P: n/a
On Mon, 25 Apr 2005 15:44:20 -0500, Ivan Marsh <an*****@you.now>
wrote:
On Mon, 25 Apr 2005 15:14:22 +0100, Paul Cooper wrote:
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.


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.

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
Jul 23 '05 #5

P: n/a
On Mon, 25 Apr 2005 21:36:26 +0100, "Stephen Chalmers"
<ig******@lycos.co.uk> wrote:
Paul Cooper <pa*********@Nobasspam.ac.uk> wrote in message
news:3d********************************@4ax.com.. .
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.

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

Thanks - this looks like just the thing I want.

Paul
Jul 23 '05 #6

P: n/a
Paul Cooper <pa*********@Nobasspam.ac.uk> wrote in message
news:sn********************************@4ax.com...
On Mon, 25 Apr 2005 21:36:26 +0100, "Stephen Chalmers"
<ig******@lycos.co.uk> wrote:
Thanks - this looks like just the thing I want.

Paul


I'm glad it's of some use.
--
Stephen Chalmers http://makeashorterlink.com/?H3E82245A


Jul 23 '05 #7

P: n/a
On Tue, 26 Apr 2005 15:56:13 +0100, "Stephen Chalmers"
<ig******@lycos.co.uk> wrote:
Paul Cooper <pa*********@Nobasspam.ac.uk> wrote in message
news:sn********************************@4ax.com.. .
On Mon, 25 Apr 2005 21:36:26 +0100, "Stephen Chalmers"
<ig******@lycos.co.uk> wrote:
Thanks - this looks like just the thing I want.

Paul


I'm glad it's of some use.


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
Jul 23 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.