Bene.
In aggiunta, posto un esempio in base al tuo codice che ho rielaborato. Potrebbe darti qualche altro spunto.
codice:
<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
      body{
        margin:0;
        padding:0;
      }
      #debug{
        z-index:100;
        position:fixed;
        bottom:0;
        left:5%;
        right:5%;
        box-sizing: border-box;
        width:90%;
        height:80px;
        border:2px solid Blue;
        font:9pt monospace;
        background:WhiteSmoke;
        outline:0;
        resize:vertical;
        overflow-y:scroll;
      }
    </style>
    <script type="text/javascript">
    
      var milliseconds = 500;
      var timeMouseDown;
      var timeout;
      
      function tsMouseDown(){
          debug("tsMouseDown...");
          timeMouseDown = new Date().getTime();
          timeout = setTimeout("debug('tsMouseDown ... 500 ms passed')",milliseconds);
      }
      function tsMouseUp(){
        clearTimeout(timeout)
        var now = new Date().getTime();
        var interval = now - timeMouseDown;
        debug("tsMouseUp: "+interval+(interval>milliseconds?" > ":" <= ")+milliseconds+" ms...");
      }
      function tsMouseOut(){
        debug("tsMouseOut: 0");
      }
      function debug(msg){
        var e = document.getElementById("debug");
        e.innerHTML += msg+ "<br>";
        e.scrollTop = e.scrollHeight;
      }
    </script>
  </head>
  <body>
    <img id="protoImage" alt="an image" src="image.jpg" onmousedown="tsMouseDown()" onmouseup="tsMouseUp()" onmouseout="tsMouseOut()" ondragstart='return false;'/>
    <div id="debug"></div>
  </body>
</html>
Buon proseguimento