Yes, that solves the problem, it now works in IE7/8+FF3.
Sadly in Chrome it doesn't appear to work at all. Clicking the stop
button does absolutely nothing, yet the method is being called because
I tried sticking a test message box in there. The box appears, but the
events are simply not stopped. I tried going to the Chrome console to
find out if any errors were being reported, and it breaks even earlier
saying that '.observe' is not a function.
<html>
<head>
<title>Test Page</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
Object.extend(Element.Methods, {
stopObservingNested: function(element) {
alert('about to stop events...');
element.descendants().invoke('stopObserving');
element.stopObserving();
alert('stopped events! - supposidly');
return element;
}
});
Element.addMethods();
window.onload = function() {
$('testDiv').observe('click', function(event) {
alert('clicked div'); });
$('testSpan').observe('click', function(event) {
alert('clicked span'); });
$('testClear').observe('click', function(event) {
var el = $('testDiv');
el.stopObservingNested();
});
}
</script>
</head>
<body>
<div id="testDiv">
<form>
<span id="testSpan">
Hello World!
</span>
</form>
- Div Part!
</div>
<input id="testClear" type="button" value="Clear Events" />
</body>
</html>
2008/10/4 kangax <[EMAIL PROTECTED]>:
>
> On Oct 3, 7:26 pm, "Lea Hayes" <[EMAIL PROTECTED]> wrote:
>> This works great, until a form or input element, is within the element
>> hierarchy. It is mainly a problem with the HTML input tag, because
>> most of the time (especially in ASP.NET) everything is contained
>> within the form.
>>
>> <html>
>> <head>
>> <title>Test Page</title>
>> <script type="text/javascript" src="prototype.js"></script>
>> <script type="text/javascript">
>> Object.extend(Element.Methods, {
>> stopObservingNested: function(element) {
>> element.stopObserving();
>>
>> element.descendants().each(Element.stopObserving);
>> }
>> });
>> Element.addMethods();
>>
>> window.onload = function() {
>> $('testDiv').observe('click', function(event) {
>> alert('clicked div'); });
>> $('testSpan').observe('click', function(event) {
>> alert('clicked span'); });
>> $('testClear').observe('click', function(event) {
>> var el = $('testDiv');
>> el.stopObservingNested();
>> });
>> }
>> </script>
>> </head>
>> <body>
>> <div id="testDiv">
>> <!-- Form causes "eventName.include is not a function"
>> prototype.js Line: 3942
>> <form>
>> <span id="testSpan">
>> Hello World!
>> </span>
>> </form>
>> - Div Part!
>> </div>
>>
>> <input id="testClear" type="button" value="Clear Events" />
>> </body>
>> </html>
>
> I'm an idiot : )
> This error has nothing to do with the form, but is due to the way
> `stopObserving` works. We had this "issue" fixed in a trunk but then
> it was temporarily removed before 1.6.0.3 release. The problem is that
> `stopObserving` accepts optional 2nd and 3rd arguments and when passed
> as an iterator (to `each`) it gets called with `value` and `index`
> arguments that are being passed to an iterator.
>
> You can use `invoke` meanwhile (don't forget to extend an element
> first and then return it from the method):
>
> Element.addMethods({
> stopObservingNested: function(element) {
> element = $(element);
> element.descendants().invoke('stopObserving');
> return element.stopObserving();
> }
> });
>
> --
> kangax
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
