Adding mouse click navigation to Reveal.js

This post is more than 2 years old.

I'm growing more and more fond of the HTML presentation framework Reveal.js. One thing I was curious about was whether I could use mouse clicks to navigate a presentation. Why? I'm considering using a Bluetooth device to navigate a presentation while I'm away from my laptop. I've also recently installed Touch Mouse from Logitech, which allows your iOS device to drive a mouse (both the cursor and mouse buttons).

I whipped up the following code, which I added to the bottom of the default Reveal.js demo presentation.

The first line sets up the event handler for mouse clicks. The second event handler disables the context menu. This is necessary for right menu clicks. Without it you get the normal right click context menu.

Finally, the actual event handler is somewhat trivial. You check which button was clicked and then use the Reveal API to go either forward or backward. (The Logitech app supports a center mouse button too. You could bind that to the overview feature, which shows you all the slides.)

That's it. Regular links still work fine, which is kind of cool. I'm not sure if I'll actually use this, but I thought it was a fun experiment. If you want to test this, hit up the demo below.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Pete posted on 10/22/2012 at 8:25 PM

That's a cool idea, double cool for showing me Touch Mouse as well, I hadn't heard of that.

Comment 2 by JR Galia posted on 9/15/2013 at 5:54 AM

I think the problem with this is that clicking "left" arrow will go back to the current page.

Comment 3 by Raymond Camden posted on 9/15/2013 at 6:56 PM

I'm not seeing that. Instead, it looks like the controls are broken. My code should probably notice a click on those controls and NOT do anything in that case.

Comment 4 by Daniel Ostendorff posted on 9/3/2015 at 7:17 PM

One of the problems I'm running in to is by using a single mouse click to advance, I can't click on hyperlinks within the presentation. When I do, rather than following the hyperlinks, the presentation moves to the next slide. Anyone have any ideas about how to rewrite this require a double click to either move forward or backward? It might be simple. I'm just not familiar with the coding on this one.

Comment 5 (In reply to #4) by Raymond Camden posted on 9/5/2015 at 2:52 PM

Check the target in the event handler - if it is a link, then don't preventdefault and don't continue with the rest of the function.