Toggle right click menu on button click - jQuery

Question

Following is my jQuery Code which is working fine except for the first click. I am expecting the right click to be disabled on the first click, but somehow first click is not disabling the right click but after that toggle works. Let me know what I am doing wrong here.

jQuery Code -

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

HTML Code -

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

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

JSFIDDLE - https://jsfiddle.net/mLm096o4/

James Hibbard · Accepted Answer · 2017-04-24 07:39:08Z

1

Remove the code to handle right clicks from within event listener for the Toggle Right Click button.

const $document = $(document);

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

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

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

Also, you can change let $document = $(document); to const $document = $(document); as you won't be assigning a different value to this variable (at least you shouldn't be).

Edit: updated in response to comment.

edited Apr 24, 2017 at 7:39

answered Apr 24, 2017 at 7:25

James Hibbard

17.8k14 gold badges69 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nesh Over a year ago

This will make the right click disabled by default. I want it to be disable/enable by button click

James Hibbard Over a year ago

Just change the let toggleValue = true; to let toggleValue;. I'll update my answer.

Evan Knowles · Accepted Answer · 2017-04-24 07:25:02Z

1

You reassign click handlers over and over - try assign the click handler just once.

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

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

answered Apr 24, 2017 at 7:25

Evan Knowles

7,5592 gold badges41 silver badges73 bronze badges

2 Comments

Nesh Over a year ago

This will make the right click disabled by default. I want it to be disable/enable by button click

Evan Knowles Over a year ago

Start with let toggleValue = false then.

Mohamed-Yousef · Accepted Answer · 2017-04-24 07:34:08Z

0

simply use 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>

edited Apr 24, 2017 at 7:34

answered Apr 24, 2017 at 7:27

Mohamed-Yousef

24k3 gold badges21 silver badges28 bronze badges

1 Comment

James Hibbard Over a year ago

As Evan points out, with this solution, you are assigning click handlers over and over...

Collectives™ on Stack Overflow

Toggle right click menu on button click - jQuery

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related