title: Disabling contextmenu (the options seen on a right click) by adding event listener doesn't work
body: <h2>Disabling <code>contextmenu</code> via an event handler</h2>
  
  <p>I am trying to disable right click on an element. I found a solution which does it like so:</p>
  
  <pre><code>&lt;div oncontextmenu='return false'&gt;&lt;/div&gt;
  </code></pre>
  
  <p>But since it is not a good practice to have event handlers in html, I tried something like:</p>
  
  <pre><code>&lt;div id='test'&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and on the js part of the code:</p>
  
  <pre><code>let test = document.getElementById('test')
  
  test.addEventListener('contextmenu', (e) =&gt; {
    console.log('right click!')
    return false
  })
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let test2 = document.getElementById('test2')
  
  test2.addEventListener('contextmenu', (e) =&gt; {
    console.log('right click!')
    return false
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    height: 100px;
    width: 100px;
    border: 1px solid black;
  }
  
  #test1 {
    background-color: red;
  }
  
  #test2 {
    background-color: blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id='test1' oncontextmenu='return false'&gt;&lt;/div&gt;
  &lt;div id='test2'&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Right click on <code>test1</code> would be successfully disabled, but not on <code>test2</code> and the console proves that the program control did reach the handler. </p>
  
  <hr>
  
  <p>I am not looking for a workaround as </p>
  
  <pre><code>&lt;div id='test'&gt;&lt;/div&gt;
  
  let test = document.getElementById('test')
  
  test.addEventListener('contextmenu', (e) =&gt; {
    e.preventDefault()
    console.log('right click!')
  })
  </code></pre>
  
  <p>works perfectly.</p>
  
  <hr>
  
  <p>I want to know, why are the two elements in the above snippet behaving differently?</p>