Как очищать прошлые target?

Question

У меня возникла проблема, в своем контекстном меню(нажатие ПКМ в квадратном блоке), при нажатии на delete в консоль выводится тег. При каждом нажатии ПКМ, таргет запоминается и в консоль выводится много результатов, и с каждым последующим нажатием все больше и больше тегов в консоли. Подскажите, что не так в коде, нужно что бы выводился лишь текущий тег, без предыдущих? Заранее спасибо!

Вот сам пример кода:

let modalBlock = document.querySelector('.modal_block');
let contextMenu = document.querySelector('.context-menu');

function showMenu(x, y) {
  contextMenu.style.left = x + 'px';
  contextMenu.style.top = y + 'px';
  contextMenu.classList.add('show-menu');
}

function hideMenu() {
  contextMenu.classList.remove('show-menu');
}

function onContextMenu(e) {
  e.preventDefault();
 
  let deleteBtn = document.querySelector('.delete-btn');

  deleteBtn.addEventListener('click', function() {
    console.log(e.target.tagName);
  }, false);

  showMenu(e.clientX, e.clientY);
  document.addEventListener('click', onMouseClick, false);
}

function onMouseClick() {
  hideMenu();
  document.removeEventListener('click', onMouseClick);
}

modalBlock.addEventListener('contextmenu', onContextMenu, false);

ul {
  list-style: none;
}
.modal_block {
  width: 300px;
  height: 300px;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 12px rgba(0, 0, 0, .7);
}
.context-menu {
  position: absolute;
  display: inline-block;
  font-family: serif;
  font-size: 14px;
  background: #f7f7f7;
  padding: 7px;
  border-radius: 1px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .3);
  opacity: 0;
  pointer-events: none;
}
.menu-item {
  cursor: pointer;
}
.menu-item:hover {
  background: #e5e5e5;
  cursor: pointer;
}
.menu-item.disabled {
  opacity: .5;
  pointer-events: none;
  cursor: default;
}
.show-menu,
.menu-item:hover > .menu {
  opacity: 1;
  pointer-events: auto;
}

<div class="modal_block">
  <ul class="context-menu">
    <li class="menu-item rename-btn"><span>Rename</span></li>
    <li class="menu-item delete-btn"><span>Delete item</span></li>
  </ul>
</div>

БЛОГ НА HUSL

Как очищать прошлые target?

Ответы (0 шт):