Prototype's Event.stopObserving() Fails in Firefox 2.0

T

tdan

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(this, 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'});
}
}
 
T

tdan

Let me answer my own question.

ovserve( ) and stopObserving() have 3 required paramaters which must be
identical for stopObserving to work correctly
Event.observe(element, eventType, handler)
Event.stopObserving(element, eventType, handler)

1. element - the element you want to attach the event handler to like
$('myCoolButton')
2. eventType - like 'mouseclick' or 'keyup'
3. handler - HERE IS THE TRICKY ONE! handler must be identical in both
observe() and stopObserving() and anonymous functions may not be used.
This can be done by assigning the entire handler to a variable and then
entering that variable into both observe() and stopObserving(), I
should have done:

this.handler1 = this.ColorTable_onMouseOver.bindAsEventListener(this,
eColoredDiv)
this.handler2 = this.document_onMouseUp.bind(this, H_TableHolder)
- - - - -
- - - - -
Event.observe($('ColorTable'), 'mouseover', this.handler1);
Event.observe(document, 'mouseup', this.handler2);
- - - - -
- - - - -
Event.stopObserving($('ColorTable'), 'mouseover', this.handler1);
Event.stopObserving(document, 'mouseup', this.handler2);





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(this, 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'});
}

}
Click to expand...
 

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

When draggable=false & draggable=true dont work ? 1
Help with code 0
Closing an overlay outside the overlay as well 1
How to have two html audio players on one page? 0
My sliding panel in React Js with graphs on it renders nothing but a blank screen--need help 0
How to change star rating color on mouseenter, on mouseout, and on onclick 0
Survey details won't go through using php, ajax, Mysql 0
Event registration in Firefox 2.0 2

Members online

No members online now.
Total: 34 (members: 0, guests: 34)
Robots: 357

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,070
Latest member
BiogenixGummies

Latest Threads

Top