按钮必须具有按钮标签吗？

Question

在下面的代码中，是一个带有星级栏的网站。可以单击星号。但是，当我打开chrome开发者控制台查看javascript代码时，没有按钮标签。 5星被视为按钮吗？ 是否应该有一个单击事件侦听器？ 当我单击星星时，它变成蓝色。这怎么工作？

按钮的哪一部分正是按钮？是这条线吗？

<i class="svi-star ratingicon-full"></i>

<div class="subject-answer">
  <div class="ratingbar-container" steps="5">
    <div class="ratingbar-wrap" style="height: 40px; font-size: 38px;">
      <div class="rating" rel="1">
        <i class="svi-star ratingicon-full"></i>
        <i class="svi-star-o ratingicon-outline">
        </i>
      </div>
      <div class="rating" rel="2">
      <div class="rating" rel="3">
      <div class="rating" rel="4">
      <div class="rating" rel="5">
      </div>
    <div class="input-wrapper">...</div>
   </div>
</div>

（我无法复制和粘贴，我必须先购买另一杯咖啡才能获得可以打开该网站的新代码，但我希望我刚才键入的代码部分足够了）

左侧是带有评分栏的网页，右侧是相应的javascript代码（chrome开发者控制台）：

Answer 1

每个HTML元素都可以有一个名为onClick的事件侦听器，可以是可以单击的+，也可以是getClass().getResourceAsStream("bomb3.png")，在这种情况下，它是<div>。 一切正常，不用担心;）

确保添加css {cursor：pointer;}，所以当您将鼠标悬停时它将显示手形：）

评论更多UX问题。

Answer 2

您可以在每个html元素上都具有click事件。因此，任何东西都可以成为按钮。

document.querySelector('.div').onclick = () => {
  console.log('clicked on a div');
}

document.querySelector('.span').onclick = () => {
  console.log('clicked on a span');
}

.div {
  background-color: red;
  width: 100px;
  height: 100px;
}

.span {
  background-color: blue;
  color: white;
}

<div class="div">
  <span class="span">this is a clickable span</span>
</div>

Answer 3

可以创建不是可以单击的按钮（任何元素都可以添加 click 事件监听器）的东西，在这种情况下，网站似乎没有内容的斜体元素，并且使用相关的JavaScript进行某些样式设置。

最佳实践是使用语义HTML，在这种情况下，它们将是<button>个元素（或可能是<input type="radio">），因为这些元素带有各种各样的功能（对于访问目的特别有用，因为它们允许（例如，无法操作鼠标使用 Tab 键导航的关节炎用户或盲人用户使用屏幕阅读器访问内容）。

请注意，取决于您的地理位置，受众的地理位置以及您的网站提供的服务类型：法律上可能会要求您确保其可访问性。