title: I want to detect whether the right or left mouse button is down during a mousemove event
body: <p>I am using HTML5 and want to know if the right mouse button or left mouse button is held down during a mouse move. The right mouse button has event.button = 2 for the right button. The left button has event.button = 0. During the mousemove, event.button = 0 always. I have supplied some sample code. What am I doing wrong?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
  
  &lt;title&gt;demo on detecting mouse buttons&lt;/title&gt;
  &lt;meta charset="utf-8"/&gt;
  
  &lt;style&gt;
  #mycanvas{ border-style:solid; width:400px; height:400px; border-width:2px;}
  &lt;/style&gt;
  
  
  &lt;script type="text/javascript"&gt;
  
  function detectDown(event)
  {
  var string = "Mouse Down, event.button = " +event.button;
  var canvas = document.getElementById("mycanvas");
  var context = canvas.getContext("2d");
  context.clearRect(0,0,300,20);
  context.fillText(string,0,10);
  }
  
  function detectMove(event)
  {
  var string = "Mouse Move, event.button = " +event.button;
  var canvas = document.getElementById("mycanvas");
  var context = canvas.getContext("2d");
  context.clearRect(0,30,300,20);
  context.fillText(string,0,40);
  }
  
  function detectUp(event)
  {
  var string = "Mouse Up, event.button = " +event.button;
  var canvas = document.getElementById("mycanvas");
  var context = canvas.getContext("2d");
  context.clearRect(0,60,300,20);
  context.fillText(string,0,70);
  }
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;!-- --&gt;
  
  &lt;body&gt;
  
  &lt;canvas id="mycanvas"onmousedown="detectDown(event)" onmouseup="detectUp(event)" onmousemove="detectMove(event)" &gt;
  &lt;/canvas&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>