0

Me interesa dejar el mouse quieto y centrado dentro de un botón, esto cuando se active el onmousedown y desactivar la función cuando se active el onmouseup

¿Existe manera de hacerlo?

var click = document.getElementById("click");

click.onmousedown = function() {
//
}
click.onmouseup = function () {
//
}
<button id="click">Botón</button>

3
  • 2
    Pienso que va contra todo principio de usabilidad... pero cuéntanos, ¿Para qué quieres lograr eso?¿Cómo te lo imaginas? Commented el 28 ene. 2020 a las 2:22
  • @Ruslan López estoy moviendo un objeto con el mouse, el problema es que el mouse tiene que estar dentro del objeto para que se mueva correctamente de lo contrario se vuelve loco, entonces la idea es que no se salga del objeto y además de eso esté centrado dentro del objeto. Commented el 28 ene. 2020 a las 2:51
  • 2
    Quizás para lo que quieres realizar te pueda ser de utilidad usar "drag and drop", échale un ojo a jQuery.ui draggable
    – x3k
    Commented el 28 ene. 2020 a las 7:10

1 respuesta 1

2

Forzar el apuntador a una posición no se puede hacer con un navegador (ademas, como se mencionó, es contrario a cualquier criterio de usabilidad), lo que se puede hacer es simular el comportamiento que se quiere, una forma, entre otras posibles es ocultar el pointer y poner una imágen de un supuesto apuntador en la posición que se quiere. Aquí dejo un ejemplo imperfecto de como podría ser:

 const click = document.getElementById("boton");
 const cursor = document.getElementById("cursor");

 click.onmousedown = function() {
   click.style.cursor = 'none';
   document.body.style.cursor = 'none';
   cursor.style.display = 'block';

 }
 document.body.onmouseup = function() {
   click.style.cursor = 'pointer';
   document.body.style.cursor = 'pointer';
   cursor.style.display = 'none';
 }
body{
  width: 200px;
 height:200px;
}
#cursor {
  width: 13px;
  display: none;
  position: relative;
  bottom: 50px;
  left: 50px;
}
#boton{
 width: 100px;
 height:100px;
}
<div>
  <button id="boton">Botón</button>
  <svg id="cursor" viewBox="11.8 9 16 22" class="mouse">
    <path d="M20,21l4.5,8l-3.4,2l-4.6-8.1L12,29V9l16,12H20z"></path>
  </svg>
</div>

1
  • Me encantó esta respuesta. Voto +1 Commented el 28 ene. 2020 a las 18:03

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.