HTML: Есть ли способ уменьшить интерактивную область текста в событии onclick?

Question

Я делаю несколько кнопок с вычитанием и добавлением символов, я хочу, чтобы область, в которой они могут быть нажаты, была точно видимой областью символа, но поскольку у меня довольно большой размер шрифта, событие onclick происходит даже в пустых местах рядом с символами, я пытался уменьшить высоту строки, а также пытался уменьшить высоту и ширину div, содержащего кнопки, но ничего не работает.

PS: Возможно, я смогу исправить это, используя SVG вместо текста, но сначала хотелось бы узнать, есть ли решение с использованием текста.

Пример того, что происходит:

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>

Видите всю зеленую область, на которую можно кликнуть? Это именно то, чего я не хочу, то, что я хочу, чтобы было кликабельно, - это именно размер символов, например:

javascript html css

0

Keving Andrades 21 Янв 2022 в 10:08

1

Используйте line-height: 0.7 в .buttons классе div

–

Minal Chauhan

21 Янв 2022 в 10:11

Визуально высота строки уменьшилась, но область клика осталась точно такой же высоты i.imgur.com/YkXTEXD. png

–

Keving Andrades

21 Янв 2022 в 10:32

Добавьте overflow: hidden; к .buttons с line-height redus

–

Lalji Tadhani

21 Янв 2022 в 10:51

Answer 1

Я думаю, вы слишком много думаете об этом. Оберните его в элемент div с вашим собственным классом, который указывает размер в CSS. Конечно, на самом деле вы нажимаете на div, а не на спаны. Я полагаю, кнопки + - ... должны быть одинакового размера, верно?

divClass
 {
  width: 30px;
  height: 30px 
 }

0

Jan Lacina 21 Янв 2022 в 10:14

Это не сработало, событие onclick находится в промежутках, а не в div. С divClass { width: 30px; height: 30px } интерактивная область остается неизменной, даже если я изменяю размер каждого диапазона с высотой и шириной или с высотой строки, это то же самое

–

Keving Andrades

21 Янв 2022 в 10:53

Answer 2

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>

0

Manoj Tolagekar 21 Янв 2022 в 10:18

Фрагмент кода запуска может помочь вам в этом

–

Manoj Tolagekar

21 Янв 2022 в 10:19

Answer 3

Вы можете изменить размер в классе кнопки. Свойство font-size: . И добавьте gap: n px в класс кнопки.

.buttons {
  font-size: 150px; // change it to 30px maybe
  ...
  gap: 90px;
}

Рабочий пример:

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: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 90px;
  left: 0;
  right: 0;
  gap: 90px;
}

.buttons span {
  margin: 0 10px;
  padding: 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>

0

Maik Lowrey 21 Янв 2022 в 10:20

var counter = document.getElementById("counter") бесполезен.

–

connexo

21 Янв 2022 в 10:57

Answer 4

Если вы хотите сохранить текущую структуру HTML, вы можете просто сократить высоту строки и увеличить значение top, чтобы символы располагались вертикально:

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: 200px;
  left: 0;
  right: 0;
  line-height: 90px;
}

.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>

0

A Haworth 21 Янв 2022 в 10:25

В Выполнить фрагмент кода он показывает только то, что мне не нужно, каждую кнопку можно нажимать за пределами зеленой области, и это то, чего я не хочу, я хочу, чтобы можно было щелкнуть только зеленую область без необходимость изменить размер шрифта

–

Keving Andrades

21 Янв 2022 в 10:58

var counter = document.getElementById("counter") бесполезен.

–

connexo

21 Янв 2022 в 10:58

Answer 5

Хакерское решение может работать так:

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

connexo 21 Янв 2022 в 10:57

HTML: Есть ли способ уменьшить интерактивную область текста в событии onclick?

5 ответов

Похожие вопросы

Новые вопросы

javascript