Side navigation
#939 closed bug (fixed)
Opened February 09, 2007 01:06PM UTC
Closed April 22, 2007 03:23AM UTC
Last modified March 15, 2012 06:54PM UTC
events don't work with iframes
| Reported by: | Volker Mische | Owned by: | |
|---|---|---|---|
| Priority: | major | Milestone: | 1.1.3 |
| Component: | event | Version: | 1.1a |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
If you want to add an event to an iframe it doesn't get fired. I tested it with Iceweasel 2.0.0.1. Here is a minimal example of the problem:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>event bug</title>
<script type="text/javascript" src="../jquery-1.1.1.js"></script>
<script type="text/javascript">
function edit()
{
var iframe = document.getElementById('myiframe');
var doc = iframe.contentDocument;
doc.designMode="on";
// works in iceweasel 2.0.0.1
doc.addEventListener('click',function(){alert("addEventListener");},false);
// doesn't work
$(doc).bind('click',function(){alert("bind");},false);
}
</script>
</head>
<body onload="edit()">
<iframe id="myiframe"></iframe>
</body>
</html>
There's a problem with the event handling code. Please take a look at Dean Edwards' current add event code and his blog entry: he has added support for DOM 2 event handling. With this addition it works. Here's a patch against rev1312 (the patch isn't perfect as i don't know much about jquery's eventhandling but it should serve as a starting point)
Index: event.js
===================================================================
--- event.js (revision 1312)
+++ event.js (working copy)
@@ -17,32 +17,36 @@
if( data )
handler.data = data;
- // Make sure that the function being executed has a unique ID
- if ( !handler.guid )
- handler.guid = this.guid++;
+ if (element.addEventListener) {
+ element.addEventListener(type, handler, false);
+ } else {
+ // Make sure that the function being executed has a unique ID
+ if ( !handler.guid )
+ handler.guid = this.guid++;
- // Init the element's event structure
- if (!element.events)
- element.events = {};
+ // Init the element's event structure
+ if (!element.events)
+ element.events = {};
- // Get the current list of functions bound to this event
- var handlers = element.events[type];
+ // Get the current list of functions bound to this event
+ var handlers = element.events[type];
- // If it hasn't been initialized yet
- if (!handlers) {
- // Init the event handler queue
- handlers = element.events[type] = {};
+ // If it hasn't been initialized yet
+ if (!handlers) {
+ // Init the event handler queue
+ handlers = element.events[type] = {};
- // Remember an existing handler, if it's already there
- if (element["on" + type])
- handlers[0] = element["on" + type];
- }
+ // Remember an existing handler, if it's already there
+ if (element["on" + type])
+ handlers[0] = element["on" + type];
+ }
- // Add the function to the element's handler list
- handlers[handler.guid] = handler;
+ // Add the function to the element's handler list
+ handlers[handler.guid] = handler;
- // And bind the global event handler to the element
- element["on" + type] = this.handle;
+ // And bind the global event handler to the element
+ element["on" + type] = this.handle;
+ }
// Remember the function in a global list (for triggering)
if (!this.global[type])
@@ -55,18 +59,22 @@
// Detach an event or set of events from an element
remove: function(element, type, handler) {
- if (element.events)
- if ( type && type.type )
- delete element.events[ type.type ][ type.handler.guid ];
- else if (type && element.events[type])
- if ( handler )
- delete element.events[type][handler.guid];
+ if (element.removeEventListener) {
+ element.removeEventListener(type, handler, false);
+ } else {
+ if (element.events)
+ if ( type && type.type )
+ delete element.events[ type.type ][ type.handler.guid ];
+ else if (type && element.events[type])
+ if ( handler )
+ delete element.events[type][handler.guid];
+ else
+ for ( var i in element.events[type] )
+ delete element.events[type][i];
else
- for ( var i in element.events[type] )
- delete element.events[type][i];
- else
- for ( var j in element.events )
- this.remove( element, j );
+ for ( var j in element.events )
+ this.remove( element, j );
+ }
},
trigger: function(type, data, element) {