23.04.2013 Views

javascript

javascript

javascript

SHOW MORE
SHOW LESS

Create successful ePaper yourself

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

}<br />

burst(e);<br />

thwart(e);<br />

function move(e) {<br />

if (!e) e = window.event;<br />

wrapper.style.left = left + e.clientX - clientX + "px";<br />

wrapper.style.top = top + e.clientY - clientY + "px";<br />

}<br />

function drop(e) {<br />

if (!e) e = window.event;<br />

}<br />

CHAPTER 9 ■ LISTENING FOR EVENTS<br />

Now to prevent the mousemove event object from traversing the DOM tree any further, pass e to<br />

burst(). Note that this is just for Internet Explorer 9, Firefox, Safari, Chrome, and Opera since in Internet<br />

Explorer 8 or earlier the mousemove event has already ended its journey by bubbling up to document.<br />

Note too that there would be no point in passing e to thwart() inasmuch as there is no default action for<br />

a mousemove event.<br />

And with that, we’re done coding move(). So if any one next to you has their ears covered and eyes<br />

closed, give them a poke. Then have them cut and paste our code for move(), which appears here:<br />

function drag(e) {<br />

if (!e) e = window.event;<br />

if (!e.target) e.target = e.srcElement;<br />

var wrapper = e.target.parentNode;<br />

var left = parseInt(queryCascade(wrapper, "left"));<br />

var top = parseInt(queryCascade(wrapper, "top"));<br />

var clientX = e.clientX;<br />

var clientY = e.clientY;<br />

wrapper.style.zIndex = doZ();<br />

addListener(document, "mousemove", move, true);<br />

addListener(document, "mouseup", drop, true);<br />

burst(e);<br />

thwart(e);<br />

function move(e) {<br />

if (!e) e = window.event;<br />

wrapper.style.left = left + e.clientX - clientX + "px";<br />

wrapper.style.top = top + e.clientY - clientY + "px";<br />

burst(e);<br />

}<br />

function drop(e) {<br />

if (!e) e = window.event;<br />

}<br />

}<br />

Writing the Mouseup Event Listener<br />

Now for the mouseup event listener, drop(). First, we want to tell JavaScript not to listen for mousemove<br />

or mouseup events on document. This is where our helper function removeListener() earns its keep.<br />

Remember that to remove an event listener with removeEventListener() or detachEvent(), you must<br />

pass the same parameters that you added the event listener with. With this in mind, let’s cut and paste<br />

our addListener calls within drag(). Then just change addListener to removeListener:<br />

381

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

Saved successfully!

Ooh no, something went wrong!