Adding mouse click navigation to Reveal.js

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.

  • Daniel Ostendorff

    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.

    • http://www.raymondcamdencom/ Raymond Camden

      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.