我将如何定位 vanilla JS 中点击区域最近的子元素方面？

Question

基于这个问题，我想到了另一个问题。 虽然这两个问题几乎相似，但它们是不同的。

我将如何在 vanilla js 的点击区域中定位最近的子元素方面意味着：我将点击li元素的外侧和ul元素的内侧，最近的li将成为目标..下面的示例代码..

注意： Jquery find方法无法解决问题。 我试过了，但它一直重复相同的元素。

我试图达到的目标

从下图中红色标记区域：当我点击红色标记区域时，最接近li将成为目标元素。 这就是我想要的......我没有解决这个问题。 我认为一切皆有可能...... css & js中有很多选择器......

示例代码

 $(".amenities-filters-inner").each(function(i, el) { $(el).on("click", function(event) { event.preventDefault() var element = null; element = $(event.target).closest(".amenity_id"); element = $(element).children().children().next(); if ($(element).checked == true) $(element).checked = false; else { $(element).checked = true; } let dataId = null; if (element.hasClass('amenity_data')) { dataId = $(element).data('index'); } else { element = $(event.target).find(".amenity_id"); element = $(element).children().children().next(); dataId = $(element).data('index'); } console.log('$ el:' + element) console.log('$ index:' + dataId) }) }); document.querySelectorAll(".amenities-filters-inner ").forEach(function(item) { item.addEventListener("click", function(e) { e.preventDefault(); let element = null; element = e.target.closest(".amenity_id"); // element = e.target.querySelector(".amenity_id"); element = element.children[0].children[1]; element.checked == true? element.checked = false: element.checked = true; let dataId = element.getAttribute('data-index'); console.log('js el' + element) console.log('js index ' + dataId) }) })

 .amenities-filters-inner { border: 2px dashed royalblue; max-width: 300px; padding: 1rem; } ul { list-style: none; width: 100%; margin: 0; padding: 0; } li { border: 2px solid rgb(133, 129, 129); padding: 3px; }.amenities-filters-inner { border: 2px dashed royalblue; max-width: 300px; padding: 1rem; } ul { list-style: none; width: 100%; margin: 0; padding: 0; } li { border: 2px solid rgb(133, 129, 129); padding: 3px; }.amenities-filters-inner:last-child { margin-bottom: 0; }.amenities-filters-inner ul li { margin-bottom: 20px; }.amenities-filters-inner ul li:last-child { margin-bottom: 0; }.check { display: flex; align-items: center; justify-content: space-between; position: relative; padding-left: 31px; margin-bottom: 0; padding-right: 0; cursor: pointer; font-size: 14px; color: #646464; }.check strong { color: #969696; font-size: 14px; font-weight: 400; }.check input { position: absolute; opacity: 0; cursor: pointer; }.checkmark { position: absolute; top: 0; left: 0; height: 17px; width: 17px; background-color: #fff; border-color: #646464; border-style: solid; border-width: 1px; border-radius: 2px; }.check input:checked~.checkmark { background-color: #fff; border-color: #007FEB; }.checkmark:after { content: ""; position: absolute; display: none; }.check input:checked~.checkmark:after { display: block; }.check.checkmark:after { left: 5px; top: 1px; width: 5px; height: 10px; border: solid; border-color: #007FEB; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="amenities-filters-inner"> <ul> <li class="amenity_id"> <label class="check ">One <strong>One</strong> <input type="checkbox" class="amenity_data" data-index="1" name="is_name"> <span class="checkmark"></span> </label> </li> <li class="amenity_id"> <label class="check ">Two <strong>Two</strong> <input type="checkbox" class="amenity_data" data-index="2" name="is_name"> <span class="checkmark"></span> </label> </li> <li class="amenity_id"> <label class="check ">Three <strong>Three</strong> <input type="checkbox" class="amenity_data" data-index="3" name="is_name"> <span class="checkmark"></span> </label> </li> </ul> </div>

Answer 1

有两种方法。

首先是检测点击发生的位置：

window.onclick = function(event)
{
 if (event.which && event.which==1)
 {
  console.log(event.clientX);
  console.log(event.clientY);
 }
}

然后你可以在这个奇怪的尝试中迭代

var label = document.getElementsByTagName('label');

for (var i = 0; i < label.length; i++)
{
 console.log(label[i].getBoundingClientRect());
}

然而那将毫无意义，因为：

1. 您只是在猜测用户可能打算选择一个选项。
2. 它忽略了 GUI（图形用户界面）的样式不适合可用性这一事实。
3. 可能没有问，“这对客户有帮助吗？”

在表单域之间留一些margin是可以接受的。 如果您觉得人们在点击它们时遇到困难，请添加padding ，增加font-size或两者都做。

Answer 2

我认为这可以实现您所追求的：

• 请注意，单击靠近一个复选框然后靠近另一个复选框将选中两个复选框，但您当然可以更改它。

 document.querySelectorAll(".amenities-filters-inner").forEach(function(item) { item.addEventListener("click", function(e) { e.preventDefault(); let element = null; var lis = document.getElementsByClassName("amenity_id"); for (var i = 0; i < lis.length; i++) { var current = lis[i]; var next = lis[i+1]; var currentBox = current.getBoundingClientRect(); var nextBox = next && next.getBoundingClientRect(); if (clickedBeforeFirstCheckbox(e, i == 0, currentBox) || clickedAfterLastCheckbox(e, i == lis.length-1, currentBox) || clickedInBetween(e, currentBox, nextBox)) { setCheckboxByDistance(e, current, next, currentBox, nextBox); break; } } }) }); function clickedBeforeFirstCheckbox(e, isFirst, currentBox) { return isFirst && e.clientY < currentBox.y; } function clickedAfterLastCheckbox(e, isLast, currentBox) { return isLast && e.clientY > currentBox.y; } function clickedInBetween(e, currentBox, nextBox) { return e.clientY > currentBox.y && e.clientY < nextBox.y; } function setCheckboxByDistance(e, current, next, currentBox, nextBox) { var diffToCurrent = Math.abs(e.clientY - (currentBox.y + (currentBox.height / 2))); var diffToNext = nextBox? Math.abs(e.clientY - (nextBox.y + (nextBox.height / 2))): Number.MAX_SAFE_INTEGER; if (diffToCurrent < diffToNext) { var checkbox = current.querySelector('input'); checkbox.checked =.checkbox;checked. } else { var checkbox = next;querySelector('input'). checkbox.checked =;checkbox.checked; } }

 .amenities-filters-inner { border: 2px dashed royalblue; max-width: 300px; padding: 1rem; } ul { list-style: none; width: 100%; margin: 0; padding: 0; } li { border: 2px solid rgb(133, 129, 129); padding: 3px; }.amenities-filters-inner { border: 2px dashed royalblue; max-width: 300px; padding: 1rem; } ul { list-style: none; width: 100%; margin: 0; padding: 0; } li { border: 2px solid rgb(133, 129, 129); padding: 3px; }.amenities-filters-inner:last-child { margin-bottom: 0; }.amenities-filters-inner ul li { margin-bottom: 20px; }.amenities-filters-inner ul li:last-child { margin-bottom: 0; }.check { display: flex; align-items: center; justify-content: space-between; position: relative; padding-left: 31px; margin-bottom: 0; padding-right: 0; cursor: pointer; font-size: 14px; color: #646464; }.check strong { color: #969696; font-size: 14px; font-weight: 400; }.check input { position: absolute; opacity: 0; cursor: pointer; }.checkmark { position: absolute; top: 0; left: 0; height: 17px; width: 17px; background-color: #fff; border-color: #646464; border-style: solid; border-width: 1px; border-radius: 2px; }.check input:checked~.checkmark { background-color: #fff; border-color: #007FEB; }.checkmark:after { content: ""; position: absolute; display: none; }.check input:checked~.checkmark:after { display: block; }.check.checkmark:after { left: 5px; top: 1px; width: 5px; height: 10px; border: solid; border-color: #007FEB; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

 <div class="amenities-filters-inner"> <ul> <li class="amenity_id"> <label class="check ">One <strong>One</strong> <input type="checkbox" class="amenity_data" data-index="1" name="is_name"> <span class="checkmark"></span> </label> </li> <li class="amenity_id"> <label class="check ">Two <strong>Two</strong> <input type="checkbox" class="amenity_data" data-index="2" name="is_name"> <span class="checkmark"></span> </label> </li> <li class="amenity_id"> <label class="check ">Three <strong>Three</strong> <input type="checkbox" class="amenity_data" data-index="3" name="is_name"> <span class="checkmark"></span> </label> </li> </ul> </div>