0

He realizado una encuesta; además la página contiene las respuestas, si y no; esta última no debería de ser seleccionada.
Ejemplo: Cuando pase el mouse sobre el botón, automáticamente el botón sea posicionado aleatoriamente, y así progresivamente, para que nunca sea presionado.

HTML:

   <!DOCTYPE html>
     <html>
       <head>
         <tile>Encuesta</title>
       </head>
       <body>
         <div class="respuestas">
           <div class="primera">
              <button>Si</button>
           </div>
           <div class="segunda">
              <button>No</button>
           </div>
         </div>
       </body>
      </html>

3
  • 1
    Que has intentado? Muéstranos algo de tu código CSS y JS... Te sugiero hacer el recorrido y revisar las normas de la comunidad.
    – DjCrazy
    el 8 abr. 2021 a las 23:49
  • Te recomiendo estudiar el evento mouseover
    – FranAcuna
    el 8 abr. 2021 a las 23:58
  • Esto ya se preguntó aquí
    – Triby
    el 9 abr. 2021 a las 16:21

3 respuestas 3

1

Creo que estás buscando esto, es importante conocer las reglas CSS y hacer uso de JavaScript para lograrlo. De igual forma establecer límites mínimos y máximos de tus márgenes en los que quieras que se mueva.

<!DOCTYPE html>
 <html>
   <head>
    <title>Encuesta</title>
</head>

<body>
    <div class="respuestas">
        <div class="primera">
            <button>Si</button>
        </div>
        <div class="segunda" id="move-randomly">
            <button >No</button>
        </div>
    </div>
</body>
<script>
    window.onload = (()=>{
        let move = document.querySelector("#move-randomly");
        move.addEventListener("mouseover", function(e) {
            console.log(move);
            let min = 50;
            move.style.position = "fixed";
            move.style.left = (Math.random() * (window.screen.width - min) + min) + "px";
            move.style.top = (Math.random() * (window.screen.height - min) + min) + "px";
            
        });
    })
</script>
</html>
2
  • ¿Esto no haría que se pudiera reposicionar el botón literalmente encima del ratón?
    – AQMR
    el 9 abr. 2021 a las 12:24
  • La aleatoriedad lo hace un evento poco probable, además, el evento se volvería a ejecutar, puesto que el mouse sigue encima y activaría de nuevo el event listener. Si de plano quisieras evitar en una paranoia total podrías poner un prevent en el evento de clic. el 10 abr. 2021 a las 1:03
0

<!DOCTYPE html>
 <html>
   <head>
     <tile>Encuesta</title>
   </head>
   <body>
     <div class="respuestas">
       <div class="primera">
          <button>Si</button>
       </div>
       <div class="segunda">
          <button>No</button>
       </div>
     </div>
   </body>
  </html>
  
  <script>
    let boton_no = document.getElementsByClassName('segunda')[0];
    
    boton_no.onmouseover = () => {
          boton_no.style.position = "absolute";
          boton_no.style.left = Math.random()*200 + 'px';
          boton_no.style.top = Math.random()*200 + 'px';
    }
  </script>

1
  • Yo consigo darle click al no si se reposiciona encima del ratón
    – AQMR
    el 9 abr. 2021 a las 12:17
0

Quizá esta respuesta te sirva. Básicamente reposiciona al botón en un eje XY, y compara si está dentro del marco de tu ratón. Puedes aplicar pues la misma lógica al tuyo para que nunca seas capaz de darle clic con un error de reposicionamiento y se ponga encima de la posición actual del ratón:

const LIMIT_X = 300;
const LIMIT_Y = 200;
window.addEventListener("load", ()=>{
  const btn = document.querySelector('.joker');
  
  btn.addEventListener('click', ()=>{
    alert('Has hecho trampas');
  });
  btn.addEventListener('mouseover', moveButton);
  
  function moveButton(e){
    const mouseX = e.clientX;
    const mouseY = e.clientY;
    let newX, newY;
    do {
      newX = Math.random() * LIMIT_X;
      newY = Math.random() * LIMIT_Y;
      
    } while(isMouseOverButton(mouseX, mouseY, newX, newY));
    btn.style.top= newY + "px";
    btn.style.left= newX + "px";
  }
  
  function isMouseOverButton(mX,mY, x, y) {
    const rect = btn.getBoundingClientRect();
    const conflict = (mX > x && mY < (x + rect.width) &&
        mY > y && mY < (y + rect.height));
    if (conflict) { console.log("Habrá que mover de nuevo"); }
    return conflict;
  }
});
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>007 : botón juguetón</title>
    <script src="js/007.js"></script>
</head>
<body>
    <button class="joker" tabindex="-1" style="position: relative;">Pulsame</button>
</body>
</html>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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