DEV Community

Cover image for The Radical JavaScript Contextmenu
Caleb Adepitan
Caleb Adepitan

Posted on

The Radical JavaScript Contextmenu

You could skip this introduction

It has been forever now, that browser support has limited the amount of cool features we can use on the web. If you cared much about those people who are not privileged to get the latest browser, or due to some other reasons have defaulted in updating their browsers, you'd make your cool features fairly available to all users and keep the vast unsupported extra cool to your development machine. One must be discreet as to what platforms (clients) to support, counting the cost and knowing how it affects the public distribution and availability of your product.

The statistics of support should be estimated before incorporating features into your app or product.

Take for example a gas cooker and a microwave oven (as client), then a small metal dish, which is safe to use on a gas cooker and in an oven. Now, if you tried to replace all metal dishes with ceramic ones, because metal dishes makes too much noise when they collide with something, therefore a pollution to the community. Ceramic dishes are oven compatible but are not gas cooker compatible as they could crack. You would think twice before taking this action, counting the cost and doing the stats. of how many household in the community has a microwave oven.

The only solution we could provide to this problem over the years, is for one brilliant mind to come up with a library that finds alternative means to leverage all client when possible.


Here today, I present to my fellow developers, who have cut a part out of the web architecture as their abode, The Radical Contextmenu.

The power of contextmenu in front-end design, although available on desktop devices, is not available to mobile devices. The reason for this is yet unknown to me. The contextmenu event works appropriately on desktop, but not on most mobile browsers.
A contextmenu as we all know is triggered by a right click on a desktop and a press-down on a mobile.

Although the contextmenu event doesn't work on mobile, this radical Javascript library Contextmenu has found alternative events pathway to achieve the same result, irrespective of your browser, as long as your browser supports the Touch and TouchEvents interface.

Contextmenu makes use of touch events in place of the contextmenu event. With the help of touch events a press-down is detected. The press-down can be controlled by setting a timeoutβ€”a timeout that determines a valid press-down. If a timeout of 800ms is specified, a press-down won't be initiated until an uninterrupted touch signal/gesture that lapses 800ms is detected.

The contextmenu interface provided by this library provides four positioning system.

  • absolute
  • fixed
  • relative
  • static

This positioning system is unrelated to the css positioning of the target element. See the documentation


There have been two releases recently. The first release, v0.1.0, was a faulty one, as the package name was not unique enough to be published on npm. This is corrected in the latest release, v0.1.1, and has made the first npm publication.

Contextmenu on Github

The API is still susceptible to frequent changes. Till a stable release: we can publish a v1.0 of the library.
Check it on Github, and please contribute with pull request, report bugs using the issue tracker, gracias.

Top comments (4)

fly profile image
joon • Edited

A heart and unicorn for the skip button :)
Very thoughtful of you.

calebpitan profile image
Caleb Adepitan

Is that a compliment?
I guess I bored you there. Moreover that wasn't my purpose of writing, so you could skip!

fly profile image
joon • Edited

I apologize profusely to the extent which that apologizing through the internet has meaning.
I do realize that the remark makes it sound as if the content bored me.

For clarification - no it did not bore me at all.

I had several previous encounters with posts where the author drones on and on about some background story when I'm just looking for solutions to a problem I'm facing.
I simply found it convenient for someone in that situation(I did not know that it was possible to force-scroll the screen to a certain position of the post in markdown - I plan on adding the feature to all future posts I write from now on πŸ˜„).

By no means was it a sassy remark implying "Ah a skip button, thank you for helping me skip this post".

Yes, it was a compliment to the thoughtfulness of the author.

Thread Thread
calebpitan profile image
Caleb Adepitan

Great piece πŸ˜„, no offence taken, not ever!