Disable Right Mouse Click for HTML5 Elements

As HTML5 becomes the industry standard markup language for developing web pages, the usage of newly introduced elements are increasing and it will continue (more likely) to grow. Today in this post I will demonstrate how to disable the right mouse click (right button of your mouse) on these HTML5 elements.

This snippet (jQuery) can be particularly useful if you do not want your visitor to save certain elements (images, graphs, videos etc.) easily (bit more difficult) from your site. Well, we all already know it is impossible to stop them entirely, so please let’s not brag about it. This main purpose here is to learn. I hope you already know the newly introduced HTML5 elements, so let’s dive into the snippet. For demonstration purpose, I will use <video></video> elements. You can use whatever element you prefer. Here you go.

jQuery v2.2 & Earlier

If you are using jQuery version 1.7 or earlier, the following snippet should work without any hiccups.

<script>
jQuery(document).ready(function(){
   jQuery("video").bind('contextmenu',function() { return false; });
});
</script>

Note: Since jQuery 3.0, .bind() method has been deprecated in favor of .on() method.

jQuery v3.0 & Future Release

If you are currently using jQuery v3.0 on your application, you can use the following snippet. Please note that .on() method has been introduced since v1.7. In other words, if you are using jQuery 1.7 or higher, you can use the following snippet. Since .bind() becomes obsolete from v.3.0, it is recommended to use .on() method.

<script>
jQuery(document).ready(function(){
   jQuery("video").on('contextmenu',function() { return false; });
});
</script>

Please feel free to test this snippet and let me know (from the comment section) if you have any question regarding this snippet only. I hope you would find this snippet useful. Thank you.

Today In History

  •  
  •  

Comment

Leave a Reply

Note: Convet HTML, PHP, JavaScripts from Postable, before posting from comment section.
License: By submitting a comment here you grant this site a perpetual license to reproduce your words and name/Web site in attribution. Please use your real name or a pseudonym (i.e., pen name, alias, nom de plume) when commenting. If you add your site name, company name, or something completely random, I'll likely change it to whatever I want.