Angular right-click directive

Directive to bind action to right click

HTML

<script src="http://code.angularjs.org/1.1.3/angular.min.js"></script>
<div id="header">
<h1>Demo</h1>
</div>
<div id="navbar">
nav 1 &nbsp;
nav 2 &nbsp;
nav 3 &nbsp;
nav 4
</div>
<div id="container">
<iframe name="ifr1" id="ifr1" src="https://player.vimeo.com/video/223837063?autoplay=1&amp;loop=1&amp;muted=1" scroll="auto">
This page uses IFrames.
</iframe>
<div id="cover">
&nbsp;
</div>
</div>
<div id="footer">
footer goes here
</div>

CSS

* {
  margin:0;
  padding:0;
  border:none;
}
input, select {
  border: 1px solid grey;
}
html {
  width:100%;
  height:100%;
}
body {
  width:100%;
  height:100%;
}
h1 {
  padding:20px;
  font-size:28px;
  font-weight:normal;
}
#header {
  color:#FFF;
  background:#000;
}
#navbar, #footer {
  height:20px;
  padding:10px 0 10px 20px;
  color:#FFF;
  background:#444;
}
#container {
  position:relative;
  width:100%;
  height:80%;
}
#ifr1, #cover {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}  

#ifr1 {
  z-index:1;
}
#cover {
  z-index:2;
}

JavaScript

document.onmousedown = disableRightclick;
var message = "Right click not allowed !!";
function disableRightclick(evt){
    if(evt.button == 2){
        alert(message);
         evt.preventDefault();
        return true;    
    }
}