Middle Click Event

by Faisal Pathan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<div class="myBox" >
  Click Me!
</div>




















<div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
  About this Question on SO: 
  <a href='https://stackoverflow.com/a/49178713/1366033'>
    Detect middle button click (scroll button) with jQuery
  </a>
</div>

CSS

.myBox {
  background:#31965a;
  color:white;
  width:100px;
  height:100px;
  line-height:100px;
  text-align:center;
}

JavaScript

$(document).on("mousedown", function (e1) {
  if (e1.which === 2) {
    $(document).one("mouseup", function (e2) {
      if (e1.target === e2.target) {
        var e3 = $.event.fix(e2);
        e3.type = "middleclick";
        $(e2.target).trigger(e3);
      }
    });
  }
}); 


$(document).on("middleclick", ".myBox", function (e) {
	alert("You Middle Clicked the Box")
});

     

$(document).on("mousedown mouseup click focus blur",function(e) {
  console.log("{" + e.which + ":" + e.type + "}"); 
});