Activate context menu with a button press - jQuery

Question

Activate context menu with a button press - jQuery

My jQuery code is mostly working fine, but I'm having an issue with the first click not disabling the right-click as expected. After the initial click, everything works as intended. Can someone help me figure out what's going wrong?

Here's the jQuery Code:

let $document = $(document);
    $document.ready(() => {
        let toggleValue = true;
        $('.btn-toggle').on('click', () => {
            $document.on('contextmenu', (e) => {
                if(toggleValue) {
                    e.preventDefault();
                }
            });
        toggleValue = !toggleValue;
    })
})

And here's the corresponding HTML code:

<h3>Toggle right-click menu on button click</h3>

<button class="btn-toggle">Toggle Right Click</button>

You can check out the JSFIDDLE for reference: https://jsfiddle.net/mLm096o4/

javascript jquery html css

Answer 1

Answer №1

Revise the code within the event listener for the Toggle Right Click button to exclude handling right clicks.

const $document = $(document);

$document.ready(() => {
  let toggleValue;

  $('.btn-toggle').on('click', () => {
    toggleValue = !toggleValue;
  });

  $document.on('contextmenu', (e) => {
    if (toggleValue) {
      e.preventDefault();
    }
  });
});

Additionally, you should update let $document = $(document); to const $document = $(document); since there is no need to reassign a different value to this variable.

Edit: adjusted based on feedback.

Answer 2

Revise the code within the event listener for the Toggle Right Click button to exclude handling right clicks.

const $document = $(document);

$document.ready(() => {
  let toggleValue;

  $('.btn-toggle').on('click', () => {
    toggleValue = !toggleValue;
  });

  $document.on('contextmenu', (e) => {
    if (toggleValue) {
      e.preventDefault();
    }
  });
});

Additionally, you should update let $document = $(document); to const $document = $(document); since there is no need to reassign a different value to this variable.

Edit: adjusted based on feedback.

Answer 3

Answer №2

To improve performance, consider assigning the click handler only once instead of repeatedly reassigning it.

let $doc = $(document);        
    $doc.ready(() => {
        let toggleActive = true;
        $doc.on('contextmenu', (e) => {
                if(toggleActive) {
                    e.preventDefault();
                }
            });

        $('.btn-toggle').on('click', () => {            
            toggleActive = !toggleActive;
        })
    })

Answer 4

To improve performance, consider assigning the click handler only once instead of repeatedly reassigning it.

let $doc = $(document);        
    $doc.ready(() => {
        let toggleActive = true;
        $doc.on('contextmenu', (e) => {
                if(toggleActive) {
                    e.preventDefault();
                }
            });

        $('.btn-toggle').on('click', () => {            
            toggleActive = !toggleActive;
        })
    })

Answer 5

Answer №3

try using if(toggleValue === false) instead of if(toggleValue)

let $document = $(document);
$document.ready(() => {
  let toggleValue = true;
  $('.btn-toggle').on('click', () => {
    $document.on('contextmenu', (e) => {
      if(toggleValue === false) {
        e.preventDefault();
      }
    });
    toggleValue = !toggleValue;
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Toggle right click menu on button click</h3>

<button class="btn-toggle">Toggle Right Click</button>

Answer 6

try using if(toggleValue === false) instead of if(toggleValue)

let $document = $(document);
$document.ready(() => {
  let toggleValue = true;
  $('.btn-toggle').on('click', () => {
    $document.on('contextmenu', (e) => {
      if(toggleValue === false) {
        e.preventDefault();
      }
    });
    toggleValue = !toggleValue;
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Toggle right click menu on button click</h3>

<button class="btn-toggle">Toggle Right Click</button>

Activate context menu with a button press - jQuery

Answer №1

Answer №2

Answer №3

Similar questions

Ajax long-polling - Timeout triggering unexpectedly

Is there a way for me to access the user's gender and birthday following their login using their Google account details?

Android experiencing issues with dynamically loading Border XML

How can Three JS and an image be combined to make a custom 3D cookie cutter?

Deletion request using Ajax in Java Spring is being denied

consolidating express routes in one consolidated file

What is the best way to access the values associated with the keys in an array of objects?

Using CSS animations to animate a div while creating a subtle pause between the two

Can the active link color be modified in Bootstrap 5 without the use of CSS?

Angular: Updating image tag to display asynchronous data

What causes the vertical scroll bar to shift on its own?

Tips on showcasing offspring of a particular guardian when the dropdown is altered from a json file using angularjs

How to turn off JavaScript using Selenium WebDriver?

Combining NPM Dependencies in a VUE.js JavaScript Project

What are some ways to keep text within the boundaries of a div element?

Tips for Addressing Angular Scope Variable Within a Div's Class

The Film Repository: Retrieve Movie Synopsis JSON

displaying and concealing elements with jquery

Identifying the specific random image that has been clicked on in an ASP.NET application

Swapping out the identifier 'datepicker' with the model attribute 'due_date' when integrating a datepicker within a Rails form