14.08.2016 Views

Beginning JavaScript with DOM Scripting and Ajax, 2nd Edition

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

Chapter 5 ■ Presentation <strong>and</strong> Behavior (CSS <strong>and</strong> Event H<strong>and</strong>ling)<br />

if (e && e.stopPropagation && e.preventDefault){<br />

e.stopPropagation();<br />

e.preventDefault();<br />

}<br />

}<br />

Using these helper methods should allow you to h<strong>and</strong>le events unobtrusively <strong>and</strong> across browsers.<br />

The way around this for versions of Safari prior to 5.1 is to add another dummy function via the old onevent<br />

syntax that stops the link from being followed. You’ll see this fix in action now. Let’s take the collapsing headline<br />

example again <strong>and</strong> replace the <strong>DOM</strong>-3–compliant methods <strong>and</strong> properties <strong>with</strong> the cross-browser helpers:<br />

xBrowserListItemCollapse.js used in exampleXBrowserListItemCollapse.html<br />

newshl = {<br />

// CSS classes<br />

overClass:'over', // Rollover effect<br />

hideClass:'hide', // Hide things<br />

currentClass:'current', // Open item<br />

init:function(){<br />

var ps,i,hl;<br />

if(!document.getElementById || !document.createTextNode){return;}<br />

var newsList = document.getElementById('news');<br />

if(!newsList){return;}<br />

var newsItems = newsList.getElementsByTagName('li');<br />

for(i = 0;i

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!