How to disable right-clicking

[rafisics]

Checklist

• I have read and accepted the contributing guidelines.

How did you create the site?

Built from jekyll-theme-chirpy

Description

How can I disable right-clicking on my Jekyll Chirpy website? I added the following code to disable right-click and certain key combinations (F12 and Alt), but it isn't working. It worked while using another theme, Hydure. What could be the issue with Chirpy, and how can I fix it?

Operations you have already tried

Here's the code I used in _includes/disablerightclick.html:

<!-- https://github.com/ishithemes/disablerightclick/blob/f34528a9e1d1da64d14e3ec8a599817001fdaa01/index.html -->

<script type="text/javascript">
    document.onkeydown = function (event) {
         event = (event || window.event);
         if (event.keyCode == 123 || event.keyCode == 18)
         {
               return false;
         }
    }
    document.addEventListener('contextmenu', event => event.preventDefault());
</script>

Anything else?

No response

[guillermodotn]

Where are you including that template?

If those are the only modifications you made to the Chirpy theme, the template will just be sitting there unused.

[rafisics]

Oh, ok. I thought putting it _inlcudes/ directory would include the code in the template. Where should I put it?

[guillermodotn]

You need to specify a Liquid declaration like this:

{% include disablerightclick.html %}

In the _layouts folder, at the file of your choice. If you want your template to be included on every page of the theme, add it to _layouts/base.html.

Since all the code you are adding is JavaScript, a cleaner approach would be to create a .js file under the _javascript directory. However, I can't tell you exactly how to include it, as I haven't figured out the JS inclusion mechanism yet 😅.

[rafisics]

The other .js-files are in the directory: /assets/js/data/. But what would be formal of the content of the .js file?

[guillermodotn]

No, I am refering to the directory _javascript not assets/js/data.

The format will be only the JavaScript with out the HTML tags:

 document.onkeydown = function (event) {
         event = (event || window.event);
         if (event.keyCode == 123 || event.keyCode == 18)
         {
               return false;
         }
    }
    document.addEventListener('contextmenu', event => event.preventDefault());

[rafisics]

Ok, but how to include it?

[rafisics]

Also, is this JavaScript code deprecated?

[tis-starlight]

1. Create a file /assets/js/disablerightclick.js and add the following code:

    document.onkeydown = function (event) {
        event = event || window.event;
        if (event.keyCode === 123 || event.keyCode === 18) {
            return false;
        }
    };
    document.addEventListener('contextmenu', (event) => event.preventDefault());

2. Add disablerightclick.js to _includes/metadata-hook.html. If you don’t have the file, create it.

<script src="/assets/js/disablerightclick.js" defer></script>

---

The event and Keycode properties are deprecated.

This approach is not recommended, as it can negatively impact user experience and can be easily bypassed.

[rafisics]

Do you suggest any other way around considering these deprecated properties?

[tis-starlight]

Although these properties are deprecated, they may still function in certain environments.

Here is an updated script that avoids using deprecated properties:

document.addEventListener('keydown', function (event) {
  if (event.key === 'F12' || event.key === 'Alt') {
    event.preventDefault();
  }
});

document.addEventListener('contextmenu', (event) => event.preventDefault());

[rafisics]

2. Add disablerightclick.js to _includes/metadata-hook.html. If you don’t have the file, create it.

<script src="/assets/js/disablerightclick.js" defer></script>

It works when I set it as:

<script src="{{ site.baseurl }}/assets/js/disablerightclick.js" defer></script>