<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@2.0.1" data-semver="2.0.1" src="http://code.jquery.com/jquery-2.0.1.min.js"></script>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<button>Now it works</button>
<h1 id="h">Press the middle<br>mouse button</h1>
<h1 class="h">Don't bother</h1>
<h1 class="h">Don't bother</h1>
<h1 class="h">Don't bother</h1>
<h1 class="h">Don't bother</h1>
<h1 class="h">Don't bother</h1>
<h1 class="h">Don't bother</h1>
<h1 class="h">Don't bother</h1>
<h1 class="h">Don't bother</h1>
<h1 class="h">Don't bother</h1>
<h1 class="h">Don't bother</h1>
<h1 class="h">Don't bother</h1>
<h1 class="h">Don't bother</h1>
<h1 class="h">Don't bother</h1>
<h1 class="h">Don't bother</h1>
<h1 class="h">Don't bother</h1>
<h1 class="h">Don't bother</h1>
<h1 class="h">Don't bother</h1>
<h1 class="h">Don't bother</h1>
<h1 class="h">Don't bother</h1>
<h1 class="h">Don't bother</h1>
<script src="script.js"></script>
</body>
</html>
// Code goes here
$(document)
.on("mousedown", function(e) {
if (e.which !== 2) return;
$("#h").text("MouseDown");
}).on("mouseup", function(e) {
if (e.which !== 2) return;
$("#h").text("MouseUp");
});
$("button")
.on("click", function() {
var txt = ($(this).text()==="Now it works")
? "Now it doesn't" : "Now it works";
$(this).text(txt);
$(".h").toggle();
});
/* Styles go here */
button {
float: right;
}
.h {
display: none;
}
h1 {
border: 1px solid black;
height: 80px;
font-size: 28px;
}