How can I prevent users from selecting text when they right click using JavaScript?

Question

How can I prevent users from selecting text when they right click using JavaScript?

My custom context menu on canvas works well, but I'm facing an issue with Text elements. When I try to right-click on a text element, it triggers text selection as if double-clicking.

I attempted to use the following code:

document.addEventListener('contextmenu', (e) => {
   e.preventDefault();
})

However, this didn't resolve the problem because the text selection still occurs.

https://i.stack.imgur.com/pkZXe.png

javascript html5-canvas mouseevent

Answer 1

Answer №1

Although it may not warrant a full answer, my limited reputation prevents me from leaving a comment. Nevertheless, there are ways to disable certain events like "onCopy", "onCut", "onPaste", and more individually. An example of how to do this can be seen below:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Copy, cut and paste disabled</h2>
    <input type="text" onselectstart="return false" onpaste="return false;" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off/>
    <br>
  </body>
</html>

If you have any further inquiries, you can refer to the full article here.

Answer 2

Although it may not warrant a full answer, my limited reputation prevents me from leaving a comment. Nevertheless, there are ways to disable certain events like "onCopy", "onCut", "onPaste", and more individually. An example of how to do this can be seen below:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Copy, cut and paste disabled</h2>
    <input type="text" onselectstart="return false" onpaste="return false;" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off/>
    <br>
  </body>
</html>

If you have any further inquiries, you can refer to the full article here.

Answer 3

Answer №2

One clever technique is using inline JavaScript expressions, such as within form tags.

<form id="test" onsubmit="return false;">

Building off this concept, another example could be seen in:

<canvas oncontextmenu="return false;"></canvas>

In response to feedback: I am not sure about the exact button activation you require, but try experimenting with different numbers like 1, 2, 3, or 4...

document.addEventListener('contextmenu', function(e) {
   // For instance, right-click could correspond to two
    if (e.button == 2) {
      // Preventing default action disables the right-click menu
      e.preventDefault();
    // If e.preventDefault(); does not work, try adding return false;
    }
});

Answer 4

One clever technique is using inline JavaScript expressions, such as within form tags.

<form id="test" onsubmit="return false;">

Building off this concept, another example could be seen in:

<canvas oncontextmenu="return false;"></canvas>

In response to feedback: I am not sure about the exact button activation you require, but try experimenting with different numbers like 1, 2, 3, or 4...

document.addEventListener('contextmenu', function(e) {
   // For instance, right-click could correspond to two
    if (e.button == 2) {
      // Preventing default action disables the right-click menu
      e.preventDefault();
    // If e.preventDefault(); does not work, try adding return false;
    }
});

How can I prevent users from selecting text when they right click using JavaScript?

Answer №1

Answer №2

Similar questions

Ensure that the value is updated upon clicking on the radio buttons and store the value in a session variable for

Header and Footer Components in ReactJS

What is the best way to structure a hierarchy in an array or object data using Node.js?

I found myself puzzled by the error message "Module protobufjs not found."

Tips for utilizing createTextNode in JSDOM

An unexpected runtime error occurred due to a SyntaxError: the JSON input abruptly ended during the authentication process with the next-auth module

Discovering the function responsible for styling a DOM elementDiscovering how to identify the

A guide to accessing REST services in AngularJS using basic authentication

Currency symbol display option "narrowSymbol" is not compatible with Next.Js 9.4.4 when using Intl.NumberFormat

When Highcharts and AngularJS team up, beware of the memory leak!

A guide to increasing a loop counter in Vue

execute a retrieval query on an html pop-up

The plugin 'vue' specified in the 'package.json' file could not be loaded successfully

Utilizing @casl/vue in conjunction with pinia: A guide to integrating these

Turn off and then turn on user input without exiting the textarea

Storing an ID field across different domains using HTML and JavaScript: Best Practices

The localhost successfully accessed req.session.userid, but unfortunately the virtual host cannot be reached at this time

Creating interactive comments in Vue 3 using dynamic rendering

The 'xxx' type is lacking various properties compared to the 'xxx[]' type, such as length, pop, push, concat, and many others

Trigger a 'change password' notification using Javascript