getBoundingClientRect returns different values

Asked

Viewed 36 times

-1

I am creating a button in React that when clicking generates an effect ripple. I use the getBoundingClientRect to pick up the position, but when I click a mouse very fast in the same place, the coordinates change and the effect appears randomly on the button.

How do I get the exact coordinates with clicks in the same place?

import React from 'react';

import { Button } from './styles'

const ReactButton = ({ children }) => {

  const renderEffect = event =>{
    const button = event.currentTarget;

    const circleEffect = document.createElement('span');
    const proportion = Math.max(button.clientWidth, button.clientHeight);

    const radius = proportion / 2;


    const rect = event.target.getBoundingClientRect();
    
    
    circleEffect.style.width = `${proportion}px`;
    circleEffect.style.height = `${proportion}px`;

    circleEffect.style.left = `${Math.trunc(event.clientX - rect.left - radius) }px`;
    circleEffect.style.top = `${Math.trunc(event.clientY - rect.top - radius) }px`;

    
    circleEffect.classList.add('drop')

    const drop = button.getElementsByClassName('drop')[0];

    if(drop) {drop.remove()};

    button.appendChild(circleEffect);

  }

  return (
      <Button onClick={renderEffect}>
          {children}
      </Button>
      )
  
}

export default ReactButton;

import styled, { keyframes } from 'styled-components'


const drop = keyframes`
  to {
    transform: scale(4);
    opacity: 0;
  }

`

export const Button = styled.button`
  position: relative;
  overflow: hidden;
  background: #EA5E45;
  transition: background 400ms;
  color: #fff;
  padding: 1rem 2rem;
  font-size: 1rem;
  outline: 0;
  border: 0;
  /* border-radius: 0.20rem; */
  box-shadow: 0 0 0.5rem rgba(0,0,0,0.3);
  cursor: pointer;

  span.drop {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: ${drop} 600ms linear;
    background: rgba(255, 255, 255, 0.7);
  }

`;
javascript react

  • Maybe event.target the second time is the circleEffect that you added the first time, try to make a console.log to check whether the event.target is really what you expect it to be. Something like console.log(event.target.tagName) maybe already to check this.

  • 1

    Really @Icaromartins. I returned twice the same tag button causing this conflict. THANK YOU MY DEAR. I left it like this: Math.trunc(Event.clientX - button.getBoundingClientRect(). left - Radius)

  • 1

    Good that helped somehow =D, so now not to leave your question open you can: answer your question showing what was the problem and what was the solution, delete it or if there is still any problem update it by clicking on [Edit].

  • 2

    is mixing different commands from those that the React uses ... will not be cool this and will bring you many problems

  • I managed to solve with the tip of the friend. Thanks for the enormous strength

1 answer

0


The solution was to remove the

const rect = event.target.getBoundingClientRect();

and only keep using with Event.currentTarget.

Browser other questions tagged javascript react

You are not signed in. Login or sign up in order to post.