Quiero poder escuchar un clic del mouse en cualquier lugar de la pestaña y luego poder ejecutar una función. Específicamente, quiero escuchar el botón 5 (primer botón en los botones laterales del mouse). Gracias por adelantado
Antes de su pregunta, nunca me di cuenta de que podía escuchar eventos fuera del clic izquierdo y derecho. No estoy muy seguro de lo que estás preguntando.
<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> 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}`; } } } 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: enlace a la referencia de CodePen : MouseEvent.button