Question

0

262

Views

HTML: Any way to reduce the clickable area of a text in an onclick event?

I'm making some buttons with the subtract and add symbols, I want the area where they can be clicked to be exactly the visible area of the symbol, but since I have the font size considerably large, the onclick event happens even in empty places that are near the symbols, I tried to reduce the line height and also tried to reduce the height and width of the div that contains the buttons but nothing works.

PS: Maybe I can fix this by using SVG instead of text, but would like to know first if there is a solution using text.

Example of what happens:

var counter = document.getElementById("counter")
counter = 1;

function subtract() {
  counter -= 1;
  if (counter <= 0) {
    counter = 0;
  }
  document.getElementById("counter").innerHTML = counter;
}

function add() {
  counter += 1;
  if (counter >= 10) {
    counter = 10;
  }
  document.getElementById("counter").innerHTML = counter;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
  user-select: none;
  margin: 0;
  padding: 0;
}

body {
  background-color: #1B5389;
  color: #e6e6e6;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

#counter {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 160px;
  font-weight: 600;
}

.buttons {
  font-size: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 130px;
  left: 0;
  right: 0;
}

.buttons span {
  margin: 0 10px;
  cursor: pointer;
  background-color: #50fa785b; /* To show the whole area that is clickable */
}

<body>
  <div id="counter">1</div>
  <div class="buttons">
    <span onclick="subtract()" class="del">-</span>
    <span onclick="add()" class="add">+</span>
  </div>
</body>

See the red area that is clickable? That's exactly what I don't want, what I want to be clickable is just the green area of the symbols, like this:

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

var counter = document.getElementById("counter")
counter = 1;

function subtract() {
  counter -= 1;
  if (counter <= 0) {
    counter = 0;
  }
  document.getElementById("counter").innerHTML = counter;
}

function add() {
  counter += 1;
  if (counter >= 10) {
    counter = 10;
  }
  document.getElementById("counter").innerHTML = counter;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
  user-select: none;
  margin: 0;
  padding: 0;
}

body {
  background-color: #1B5389;
  color: #e6e6e6;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

#counter {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 160px;
  font-weight: 600;
}

.buttons {
  font-size: 150px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  top: 130px;
  left: 0;
  right: 0;
}

.buttons span {
  margin: 0 10px;
  cursor: pointer;
  background-color: #50fa785b; /* To show the whole area that is clickable */
}

<body>
  <div id="counter">1</div>
  <div class="buttons">
    <span onclick="subtract()" class="del">-</span>
    <span onclick="add()" class="add">+</span>
  </div>
</body>

about 4 years ago · Juan Pablo Isaza Report

Answer question

Find remote jobs

Accepted Answer · 2022-07-04T18:10:16.574Z

A hacky solution could work like this:

let counter = 1;

function subtract() {
  counter -= 1;
  if (counter <= 0) {
    counter = 0;
  }
  document.getElementById("counter").textContent = counter;
}

function add() {
  counter += 1;
  if (counter >= 10) {
    counter = 10;
  }
  document.getElementById("counter").textContent = counter;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
  user-select: none;
  margin: 0;
  padding: 0;
}

body {
  background-color: #1B5389;
  color: #e6e6e6;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

.counter-container {
  display: grid;
  font-size: 150px;
  place-content: center;
  place-items: center;
  margin-top: 130px;
  column-gap: 10px;
  grid-template-areas:
    "counter counter"
    "minus      plus";
  grid-template-rows: auto 50px;
  margin: 0 auto;
  width: 170px;
}

.counter-container span {
  cursor: pointer;
  background-color: #50fa785b;
  position: relative;
  overflow: hidden;
  height: 80px;
  width: 80px;
}

.counter-container span::after {
  right: 0;
  position: absolute;
  top: -70px;
}

#counter { grid-area: counter; };

.del { grid-area: minus; }
.add { grid-area: plus; }

.del::after { content: "-"; left: 0; }
.add::after { content: "+"; left: -11px; }

<div class="counter-container">
  <div id="counter">1</div>
  <span onclick="subtract()" class="del"></span>
  <span onclick="add()" class="add"></span>
</div>

0

262

HTML: Any way to reduce the clickable area of a text in an onclick event?

2 answers

0

0

Find remote jobs

Andres GPT