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>
