For those of you using Prototype 1.6 (or Magento prior 1.6), you might wonder why event.stop() or Event.stop(event) doesn’t work in Internet Explorer 9. Here’s a quick explanation:

IE 9 makes major changes to the event system. We had to rewrite the
event code in 1.7 to support it. You can either (a) upgrade to 1.7;
(b) force your site into compatibility mode [1].

So it’s been fixed in 1.7, but what if I can’t upgrade to 1.7 and don’t want to render my website in compatibility mode? Well, after a couple of hours trying to sort this out, here’s quick (and dirty) patch for Prototype 1.6.0.3. Prototype 1.6.0.3 Event.stop IE9 fix (1354 downloads)

Also, for further reading, here are two external links that you might find useful for this issue.

• https://prototype.lighthouseapp.com/projects/8886-prototype/tickets/1264
• http://groups.google.com/group/prototype-scriptaculous/browse_thread/thread/475eddbc3decfd23/31af63a49ac77b8a

Note/Disclaimer: This has only been tested on Prototype 1.6.0.3. Use it at your own risk.

Cristi Javascript js, patch, prototype

A few more months and it would’ve been a year since the last post. Worry not, this blog hasn’t died – and just to make sure I don’t forget what I want to write, I’ve already prepare a few articles. So stay tuned!

But enough with the intro and let’s see what this article is about: Prototype (http://www.prototypejs.org/), not really my favorite javascript framework, but since Magento relies on it, I need to be able to use it and write proper code (I don’t believe in mixing frameworks either).

The scenario is rather simple – create a “class” called Stuff and then instantiate two objects of that class.

var Stuff = Class.create({
	data: {},
	x: null,
	y: [],
	
	initialize: function() {}
});

var a = new Stuff();
var b = new Stuff();

So far so good, because the code does nothing, but let’s add the following:

a.data.x = 1;
a.x = 5;
a.y.push(3);

What would you expect b to contain? From my (lack of) knowledge, I would say b.data is an empty object, b.x is null and b.y is an empty list/array. At least that’s how it goes in other programming languages, such as PHP. Well, this doesn’t happen here. If you do console.log(b) you’ll get:

data	Object { x=1}
x	null
y	[3]

In other words, object and array attributes have the same reference, or point to the same object. I would’ve said that the variables a and b are pointing to the same object, if a.x was the same as b.x, but b.x is still null, while a.x is 5.

Bug, feature or normal behavior, this can still be very annoying – I spent about an hour trying to figure out why two objects of the same “class” had the same settings when they were clearly configured differently. Hope this comes in handy at some point.

Tested on prototype v1.6.0.3 & v1.6.1.

Cristi Javascript js, prototype