Page 1 of 1

Canceling events

Posted: Fri Jan 30, 2009 4:11 am
by JellyFish
I am adding several mouse events to the document element:

Code: Select all

document.addEventListener("mousedown", pan.startScroll, true);
document.addEventListener("mousemove", pan.scroll, true);
document.addEventListener("mouseup", pan.endScroll, true);
document.addEventListener("mousewheel", pan.mouseWheel, false);
the issue is even though I'm returning false in each callback function, links and stuff being clicked on are still activating. What I'd like is a way to control if whatever is being clicked on is going to continue running other events.

Why I need this is for a bookmarklet I've been working on, which allows you to scroll and pan a webpage with the middle mouse button. Google Chrome does have a middle mouse button feature like this, so that's why I built the bookmarklet.

Here is the bookmarklet if you'd like to give it a spin. Just don't use it regularly, YOU DO NOT HAVE MY PERMISSION! Don't even keep the bookmarklet unless I say you can. :twisted:
javascript:(function(){if(typeof pan=="undefined"){var script=document.createElement("script");script.type="text/javascript";script.src="http://bookmarklets.freehostia.com/pan. ... ld(script);}}})()
So as you can see if you start the middle mouse click on a link after the panning the link will open in a new tab. I need some help figuring out how to thwart this when panning.

I appreciate any help on this.

Re: Canceling events

Posted: Fri Jan 30, 2009 2:23 pm
by pickle
Add a click listener. If the user is currently panning, cancel the click.

Re: Canceling events

Posted: Fri Jan 30, 2009 3:29 pm
by JellyFish
That didn't seem to work. I think the only time when links can be thwarted is when you return false in the links event handler, returning false in the documents event handler doesn't cut it.

Any ideas on what I could do?

Re: Canceling events

Posted: Sat Jan 31, 2009 5:16 pm
by JellyFish
I think I figured it out! :D

Code: Select all

 
//I added the following event listener
window.addEventListener("click", pan.click, true);
 

Code: Select all

 
//The handler looks like this
    click: function(e)
    {
        if (e.button == 1 && this.preventDefaultEvents == true)
        {
            e.stopPropagation();
            e.preventDefault();
        }
    },
 
What this does is:

1. stop propagating through DOM nodes
2. prevent default actions like activating links

only if the pan.preventDefaultEvents property is true; this allows me complete control over the pan.click handler.

Well anyway, if you guys have any more comments on this then feel free to speak your mind.

Cheers! :drunk:

[edit]: Would anyone know how I could prevent the autoscroll feature from appearing when I middle click in firefox? Is there a way to cancel the default middle click event using JavaScript? This way I could use this bookmarklet in firefox too.