El método jQuery dblclick() se usa para detectar cada vez que se hace doble clic en un elemento en particular. Este método solo detecta los dobles clics del botón izquierdo del mouse y no los dobles clics del botón derecho del mouse.
En este artículo, veremos cómo simular el doble clic derecho del mouse en jQuery.
Acercarse:
- Hay dos elementos HTML div , uno con un objetivo de identificación y el otro con un resultado de identificación.
- Adjunte un controlador de eventos a la identificación de destino utilizando el método on() . El nombre del evento es contextmenu, que simplemente suprime el menú del botón derecho, ya que queremos evitar la acción predeterminada de hacer clic con el botón derecho usando el método preventDefault() .
- El método mouseup() se adjunta al elemento de identificación de destino para detectar el evento cuando el usuario suelta el botón del mouse sobre este elemento. Una función anónima con un evento de parámetro se pasa como parámetro al método mouseup() de modo que podamos utilizar las propiedades which , originalEvent y detail del objeto de evento.
- La propiedad which se utiliza para comprobar en qué botón del ratón se hace clic, izquierdo o derecho. Devuelve 3 si se trata de un clic derecho, por lo que usamos esto como condición base.
- Usamos el evento original y las propiedades de detalle del objeto de evento para verificar si se trata de un solo clic con el botón derecho o un doble clic con el botón derecho. Estas propiedades devuelven 2 si se trata de un doble clic con el botón derecho; de lo contrario, devuelve 1. El elemento de identificación del resultado muestra este clic con el botón derecho simple o doble mediante el método text() .
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- jQuery -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- Basic inline styling -->
<style>
body {
text-align:center;
}
h1 {
color:green;
font-size: 2.5rem;
}
div {
font-weight: bold;
font-size: 1.5rem;
}
#target{
cursor: pointer;
margin-bottom: 2rem;
}
#result {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div id="target">Right click here to see effect</div>
<div id="result"></div>
<script type="text/javascript">
// Suppress the right-click menu
$("#target").on("contextmenu", function (event) {
event.preventDefault();
});
$("#target").mouseup(function (event) {
if (event.which === 3) {
if (event.originalEvent.detail === 2) {
$("#result").text("Double right-click!");
} else if (event.originalEvent.detail === 1) {
$("#result").text("Single right-click!");
}
}
});
</script>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, solo buscamos un doble clic con el botón derecho en lugar de un solo y un doble clic con el botón derecho. Significa que solo se verifica la condición event.originalEvent.detail === 2 . Además, agregamos el texto cada vez que hacemos doble clic con el botón derecho en lugar de simplemente mostrarlo una vez para que podamos ver exactamente cuántos dobles clics con el botón derecho se han realizado. Hemos realizado la operación de doble clic derecho exactamente 5 veces.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- jQuery -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- Basic inline styling -->
<style>
body {
text-align: center;
}
h1 {
color: green;
font-size: 2.5rem;
}
div {
font-weight: bold;
font-size: 1.5rem;
}
#target {
cursor: pointer;
margin-bottom: 2rem;
}
#result {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div id="target">Right click here to see effect</div>
<div id="result"></div>
<script type="text/javascript">
// Suppress the right-click menu
$("#target").on("contextmenu", function (event) {
event.preventDefault();
});
$("#target").mouseup(function (event) {
if (event.which === 3) {
if (event.originalEvent.detail === 2) {
$("#result").append("Double right-click!" + "<br />");
}
}
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por rajatsandhu2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA