如何监听按钮元素外的鼠标点击?

Question

我希望能够侦听鼠标单击选项卡上的任何地方，然后能够执行一个函数。具体来说，我想监听按钮5(鼠标边按钮的第一个按钮)。提前感谢

Answer 1

在你提出这个问题之前，我从来没有意识到你可以监听左键和右键之外的事件。我不太清楚你在问什么。

index . html

<div class="container">
<button id="button" oncontextmenu="event.preventDefault();">Click here.</button>
<div id='modal'>
<span id='display'>Mouse Button Type</span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

main.js

let button = document.querySelector('#button');
let log = document.querySelector('#display');
// display module
$(button).click('mouseup',function () {
$("#modal").css('display','block');
logMouseButton();
})
// bind mouse event to body
$('body').click(function (e) {
// You can put whatever here  
if ($(e.target).is($("#modal"))) {
$("#modal").css('display','none');
}
})
function logMouseButton(e) {
if (typeof e === 'object') {
switch (e.button) {
case 0:
log.textContent = 'Left button clicked.';
break;
case 1:
log.textContent = 'Middle button clicked.';
break;
case 2:
log.textContent = 'Right button clicked.';
break;
default:
log.textContent = `Unknown button code: ${e.button}`;
}
}
}

style.css

html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background: url('https://wallpapercave.com/wp/wp6242088.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
z-index: 0;
}
.container { 
position: absolute;
z-index: 1;
width: 100%;
display: flex;
flex-direction: column;
#button {
margin: 0 auto;
width: 25%;
padding: 1rem 2rem;
font-weight: bold;
font-size: 1.5rem;
font-family: "Open Sans", sans-serif;
color: black;
border-radius: 0.5rem;
background-color: rgba(255,255,255,0.4);
backdrop-filter: blur(10px);
border: none;
}
span {
margin: 2rem auto 0 auto;
width: 25%;
height: 40px;
border-radius: 0.5rem;
background-color: rgba(255,255,255,0.4);
backdrop-filter: blur(10px);
border: none;
padding: 1rem 2rem;
color: black;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 1rem;
display: flex;
align-content: center;
justify-content: center;
}
#modal {
display: flex;
justify-content: center;
align-content: center;
position: absolute;
z-index: 3;
background-color: rgba(255,255,255,0.4);
backdrop-filter: blur(10px);
width: 100%;
height: 100vh;
display: none;
}
}

CodePen:链接到CodePen参考:MouseEvent.button