|
-
Nov 6th, 2012, 05:46 PM
#1
Thread Starter
New Member
How to change Javascript to work with IE
Can someone please tell me how to fix the code below so that it works with IE. It currently works with Chrome and Firefox. Thanks.
<style type="text/css">
.highlight{
background-color: orange;
color: white;
}
</style>
<script type="text/javascript">
function createListener(){
document.addEventListener('click', function(event){
var element=event.target;
if(element!==document.body){
if(element.className===''){
element.className='highlight';
} else {
element.className='';
}
}
}, false);
}
</script>
<body onload="createListener()">
Last edited by cbanks; Nov 7th, 2012 at 10:57 AM.
-
Nov 7th, 2012, 01:56 PM
#2
Re: How to change Javascript to work with IE
You could debug the scripts, in IE using F12. Then you can see where the problem is and you can google that or ask here again.
-
Nov 7th, 2012, 07:59 PM
#3
Re: How to change Javascript to work with IE
The code should work in Internet Explorer versions 9+. In earlier versions the non-standard 'attachEvent' method must be used instead of 'addEventListener'.
Also, I recommend attaching all event listeners using JavaScript instead of HTML attributes. This keeps behaviour and presentation as separate as possible.
With those things in mind, here is how I would restructure the code:
Code:
function listen(who, event, callback)
{
if (who.addEventListener)
who.addEventListener(event, callback, false);
else if (who.attachEvent)
who.attachEvent('on' + event, callback);
}
function createListener()
{
var handler = function(event) {
var element = event.target;
if (element !== document.body)
{
if (element.className === '')
element.className = 'highlight';
else
element.className = '';
}
};
listen(document, 'click', handler);
}
listen(document, 'ready', createListener);
Untested, so there might be some typos.
Edit: The document.ready listener isn't required in this particular case because you can attach the document.click listener immediately, but I added it as an example of an alternative to your original 'onload' method.
Last edited by penagate; Nov 7th, 2012 at 08:10 PM.
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|
Reply With Quote
