I do not know how to get Event.stopObserving() to work in the context I
am using it.
I am displaying a Color Selection Table and attaching 2 events:
1. onmouseover to display the color to the user
2. onmouseup to select the color and hide the Table
The onmouseup event should also call Event.stopObserving() so that
mouse clicks are no longer being observed.
An alert is shown when the mouse is clicked indicating the event
handler is working.
Note: the script is only tested to run in Firefox 2.0
Lend a hand if you know the answer:
1. Copy and past the HTML and Javascript files below into Notepad and
save them to the same folder.
2. Name the Javascript file test.js
3. Open the HTML file in your browser.
4. Click on the Rectangular div
5. Each time you click on the div, another event handler will be
attached. Try clicking on the screen after clicking on the Rectangular
div to confirm this.
HTML FILE
############################################
############################################
<html>
<head>
<script type="text/javascript" src="prototype-1.5.0_rc1.js"></script>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">
function Body_onLoad()
{
// Create 16x16 table with all grayscale colors
for (var i=0; i<16; i++)
{
var currentRow = document.createElement("tr");
for (var j=1; j<17; j++)
{
var k = i*16 + j - 1;
var sColor = 'rgb(' + k + ',' + k + ',' + k + ')';
var currentCell = document.createElement("td");
Element.setStyle(currentCell, {'backgroundColor': sColor,
'padding': '5px'});
currentRow.appendChild(currentCell);
}
$('ColorTable').appendChild(currentRow);
}
// Instantiate new object, AA
oAA = new AA();
oAA.start();
}
</script>
</head>
<body onload="Body_onLoad();">
<div style="display: none; position: absolute;">
<table id="ColorTable" style="border: none; border-spacing: 0px;
border-collapse: collapse;" >
</table>
</div>
<div id="ClickMe" style="height: 1em; width: 4em; border: solid 1px
#000; cursor: pointer; position: absolute; top: 20em">
</div>
</body>
</html>
JAVASCRIPT FILE
############################################
############################################
function AA()
{
// Code removed
1+1;
}
AA.prototype =
{
start: function()
{
Event.observe($('ClickMe'), 'mousedown',
this.ColorDiv_onMouseDown.bindAsEventListener(this ));
},
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
ColorDiv_onMouseDown: function(evt)
{
var eColoredDiv = Event.element(evt);
var H_TableHolder = $('ColorTable').parentNode;
var pos = Position.cumulativeOffset(eColoredDiv);
// position table above colored cell
Element.setStyle(H_TableHolder, {'left': pos[0], 'top': pos[1] -
11*16});
Element.setStyle(H_TableHolder, {'display': 'block'});
Event.observe
(
$('ColorTable'),
'mouseover',
this.ColorTable_onMouseOver.bindAsEventListener(th is, eColoredDiv)
);
Event.observe
(
document,
'mouseup',
this.document_onMouseUp.bind(this, H_TableHolder)
);
},
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
ColorTable_onMouseOver: function(evt, eColoredDiv)
{
var eTableCell = Event.element(evt);
var newColor = Element.getStyle(eTableCell, 'backgroundColor');
Element.setStyle(eColoredDiv, {'backgroundColor': newColor});
},
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
document_onMouseUp: function(H_TableHolder)
{
alert('MouseUp');
Event.stopObserving($('ColorTable'), 'mouseover',
this.ColorTable_onMouseOver);
Event.stopObserving(document, 'mouseup', this.document_onMouseUp);
Element.setStyle(H_TableHolder, {'display': 'none'});
}
}
