Javascript 锁定/吸引到较大容器内的内部分区

我目前正在开发一个自定义组件，它允许您选择不同的点，这些点在时间上对应于不同的值。以下是一些示例代码：

<div class="shell">
  <div class="indicator"></div>
  <div class="indicator"></div>
  <div class="indicator"></div>
</div>

---

这看起来像：

我想知道是否有可能编写一些JS，让我的鼠标可以锁定到这些单独的圆圈中。有点像当你在PhotoShop中打开网格时，你的鼠标会被吸引到点并锁定

理想情况下，我能够锁定每个圆的中心点

---

谢谢

我猜鼠标移动的单词通常被称为“snap”

要使用JavaScript实现这一点，您必须能够操纵用户的鼠标位置。据我所知，这是不可能的

---

考虑一下这种能力将带来的可用性问题。例如，它可能会带来安全问题，因为当您尝试单击页面上的其他位置时，访问的页面可能会将鼠标指向恶意链接。

可能是，可能不是，问题是您的尝试失败在哪里？或者你试过了。

.shell {
  background-color: #DCDCDC;
  border-radius: 20px;
  display: inline-flex;
}

.indicator {
  background-color: #3CB371;
  border-radius: 50%;
  height: 15px;
  margin: 2px 5px;
  width: 15px;
}

.indicator:hover {
  background-color: white;
}

var shell = document.querySelector('.shell');

shell.addEventListener('click', function(event) {
  if (event.path && event.path[0].classList.value === 'indicator') {
    console.log(event);
  }
});