1

Buen dia. Me podrian ayudar a encontrar la forma de hacer click con el boton derecho del Mouse en el elemento que describo en el siguiente fragmento de codigo.

let b = document.getElementsByClassName('clase_elemento')[0]
b.click()

En este caso, el hace un click normal, pero necesito encontrar la forma para hacer un click derecho.... Gracias....

4
  • He buscado un poco acerca de esto en Google, he encontrado esto en StackOverflow EN, donde se dice que es imposible.
    – Rodrigo
    Commented el 19 abr. 2022 a las 21:14
  • 1
    Si lo que quieres es detectar cuando pulsas sobre determinado item con el click derecho debes colocar un listner al elemento (o delegar al document si quieres detectar en todo el documento) y escuchar el muoseup. Aqui te explican como: developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button Commented el 19 abr. 2022 a las 21:33
  • Gracias Hernan Garcia, pero no es lo que quiero. Mi necesidad es hacer CLICK DERECHO sobre un elemento de una tabla, para desplegar el menu de opciones. Tal como esta el codigo, pero CLICK DERECHO Commented el 20 abr. 2022 a las 1:15
  • Esto podría servirte (link al sitio en inglés), he probado la respuesta aceptada pero parece estar un poco inestabe. Commented el 20 abr. 2022 a las 2:08

2 respuestas 2

2

Esto puede lograrlo haciendo uso del evento contextmenu de javascript.

let b = document.getElementsByClassName('container')[0];
let contextmenu = document.querySelector('.container .contextMenu');
b.oncontextmenu = (evt)=>{
  evt.preventDefault(); // evitar que salga el menu del navegador
  contextmenu.style.display = 'block';
}
.container{
  background:#f44544;
  padding: 5px;
  position:relative;
}
.contextMenu{
  width:100px;
  height:60px;
  background: #ecf0f1;
  border:solid 2px gray; 
  position:absolute;
  display:none;
}
.contextMenu span{
  cursor:pointer;
}
<div class="container">
  Click derecho
  <div class="contextMenu">
    <span>Option 1</span>
    <span>Option 2</span>
    <span>Option 3</span>
  </div>
</div>

le adjunto este link por si quiere profundizar. https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event

0

Debes crear una función que simule el click derecho.

ATENCIÓN: Si buscas abrir el menú contextual del navegador por defecto, esto no lo abrirá; debido a que siempre este valor en el evento: "event.isTrusted" será igual a: "false" , solo te servirá para abrir algún menú personalizado o ejecutar algún código.

FUENTE: "chatGPT"

// Obtener referencia al botón y al menú contextual por sus IDs
var myButton = document.getElementById('myButton');
var contextMenu = document.getElementById('contextMenu');

// Agregar un evento para el clic derecho en el botón
myButton.addEventListener('contextmenu', function(event) {
    // Prevenir el comportamiento por defecto del navegador al hacer clic derecho
    event.preventDefault();
    // Limpiar consola
    console.clear();
    // Mostrar un mensaje en la consola cuando se simula un clic derecho
    console.log('Clic derecho simulado');
    // Mostrar el menú contextual cambiando su estilo para que sea visible
    contextMenu.style.display = 'block';
    contextMenu.style.left = `${event.clientX}px`;
    contextMenu.style.top = `${event.clientY}px`;
});

// Agregar un evento para hacer clic en cualquier parte del documento
document.addEventListener('click', function() {
    // Ocultar el menú contextual cuando se hace clic en cualquier parte del documento
    contextMenu.style.display = 'none';
});

// Función para simular un clic derecho en el botón
function simulateRightClick(element) {
    // Crear un evento PointerEvent para simular el clic derecho
    const event = new PointerEvent('contextmenu', {
        bubbles: true,
        cancelable: true,
        view: window,
        button: 2, // Especifica que es el botón derecho
        buttons: 2 // Especifica que el botón derecho está presionado
    });
    // Despachar el evento simulado en el elemento especificado
    element.dispatchEvent(event);
}

// Simular un clic derecho en el botón después de 2 segundos
setTimeout(() => {
    simulateRightClick(myButton);
}, 2000);
#myButton {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
#contextMenu {
    display: none;
    position: absolute;
    background-color: white;
    border: 1px solid #000;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}
#contextMenu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#contextMenu ul li {
    padding: 8px 12px;
    cursor: pointer;
}
#contextMenu ul li:hover {
    background-color: #f0f0f0;
}
<div>
    <div id="myButton">Haz clic derecho aquí</div>
    <div id="contextMenu" style="display: none;">
        <ul>
            <li>Opción 1</li>
            <li>Opción 2</li>
            <li>Opción 3</li>
        </ul>
    </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.