JS проблема с событием наведения мыши для отображения дополнительных кнопок - PullRequest
Новая
       33

JS проблема с событием наведения мыши для отображения дополнительных кнопок

1 голос
/ 14 января 2020

Я работаю над интерфейсом, который, когда пользователь наводит курсор на элемент LI, становятся видимыми 2 кнопки, чтобы предложить больше функциональности. Допустим, «изменить» и «удалить».

У меня проблемы с зонами попадания мыши.

Наведите курсор хорошо, когда мышь фактически находится на элементе LI (серый фон), но не работает, когда мышь находится над текстом или фактическими кнопками, которые нужно щелкнуть.

(Для контекста это расширение Chrome, а встроенный JS не разрешен.)

Сводная демонстрация здесь: https://jsfiddle.net/matthewzammit/uh9abfcr/16/

спасибо!

Мэтт

-Полный код -

HTML

   <div id="populateArrayList">
  <ul id="myList">
  <!--dynamically fill list-->
  <li id="0" class="urlElement" name="urlElement">
    <div class="urlDetails">
      <div class="urlFavicon">
        <img src="https://www.google.com/s2/favicons?domain=facebook.com">
      </div>
      <div name="url" class="urlAddress" id="0">website1.com</div>
    </div>
    <div class="actionButtons">
      <a id="remove0" class="removeButton" name="Remove" href="#"></a>
      <a id="edit0" class="editButton" name="Edit" href="#"></a>
    </div>
  </li>
  <!-- item 2 -->
    <li id="1" class="urlElement" name="urlElement">
      <div class="urlDetails">
        <div class="urlFavicon">
          <img src="https://www.google.com/s2/favicons?domain=google.com">
        </div>
        <div name="url" class="urlAddress" id="1">website2.com</div>
      </div>
      <div class="actionButtons">
        <a id="remove1" class="removeButton" name="Remove" href="#"></a>
        <a id="edit1" class="editButton" name="Edit" href="#"></a>
      </div>
    </li>
  </ul>
 </div>

JS

document.getElementById("myList").addEventListener("mouseover", e => {
    e.target.querySelector('.actionButtons').classList.add("editVisibility");
    console.log("Target: " + e.target);
})
document.getElementById("myList").addEventListener("mouseout", function (e) {
    e.target.querySelector('.actionButtons').classList.remove("editVisibility");
})
document.getElementById("myList").addEventListener("click", function (e) {
    if (e.target && e.target.getAttribute('name') == "Remove") {
        let idToRemove = e.target.parentElement.parentElement.getAttribute('id');
        alert("Remove");
    }
    if (e.target && e.target.getAttribute('name') == "Edit") {
        let idToEdit = e.target.parentElement.parentElement.getAttribute('id');
        alert("Edit");
    }
});

CSS

.urlElement {
    list-style-type: none;
    background: #ebebeb;
    margin: 10px;
    padding: 10px;
    border-radius: 7px;
    height: 15px;
}

.urlDetails {
    /*   background-color: red; */
}

.urlFavicon {
    float: left;
    margin-right: 10px;
    /*     background-color: green; */
}

.urlAddress {
    float: left;
    /*     background-color: blue; */
}

.actionButtons {
    display: none;
}

/* temp icon */
.removeButton {
    margin-left: 5px;
    padding-right: 20px;
    background-image: url("https://img.icons8.com/ios/15/000000/delete-sign.png");
    background-repeat: no-repeat;
}

/* temp icon */
.editButton {
    margin-left: 5px;
    padding-right: 20px;
    background-image: url("https://img.icons8.com/ios/15/000000/edit.png");
    background-repeat: no-repeat;
/*    display: none;*/
}

.editVisibility {
    display: unset;
    /* Hide button */
}

1 Ответ

2 голосов
/ 14 января 2020

Вы можете сделать это просто с помощью CSS следующим образом: 

.urlElement:hover .actionButtons {
    display: block;
}

Вы можете удалить обработчики событий javascript.

...