How can I turn right click off and on using functions in JS?

Question

I have disabled right click in my application using the following:

  <body oncontextmenu="return false;">

I have a textarea element which has spellcheck enabled. I want to be able to right-click in this field (for spellcheck) but I want right-click to be disabled everywhere else in the app.

I have done the following:

  <textarea onfocus="rightclickon()" onblur="rightclickoff()" spellcheck="true"></textarea>

These are the functions:

function rightclickon() {
$('body').prop('oncontextmenu', 'null');
}//end rightclickon
function rightclickoff() {
$('body').prop('oncontextmenu', 'return false');
}//end rightclickoff

My logic behind the above is that whenever the user enters the textarea, right-click would be enabled but when they leave the field, it would be disabled again. This does not work how I expected.

The first part works (right-click is enabled when the ueser enters the field). However, when the field is left, right-click does not get disabled again. It just remains on.

Is their an easier way to achieve what I want?

Answer 1

Simply inspect the origin of the event and decide what to do accordingly

 document.addEventListener('contextmenu', function(e) { if (!e.target.matches('textarea')) { e.preventDefault() } }, false)

 <p>Some paragraph</p> <ul> <li>List 1</li> <li>List 2</li> <li>List 3</li> </ul> <textarea>Just try right-clicking in here</textarea> <p>Another paragraph</p>

See https://developer.mozilla.org/en/docs/Web/API/Element/matches for details about Element.matches

How can I turn right click off and on using functions in JS?

Question

1 answers

solution1
3 ACCPTED 2017-02-22 01:48:02

How can I turn right click off and on using functions in JS?

Question

1 answers

solution1 3 ACCPTED 2017-02-22 01:48:02

solution1
3 ACCPTED 2017-02-22 01:48:02