Как исправить событие onclick, которое не сработало? - PullRequest
Новая
       13

Как исправить событие onclick, которое не сработало?

1 голос
/ 31 мая 2019

Событие onclick для кнопки с role = "menuitem" не запускается, а срабатывает наведение мыши.

Я пробовал разные вещи, например, вместо использования внешней функции, я просто сделал предупреждение, но безрезультатно. 

        {{#each docs}}
        <li class="note" id={{this.time}}>
            <a href="#">
                <div class="container">
                    <div class="more" id={{this.time}} onclick="openMenu(event)">
                        <button id={{this.time}} class="more-btn">
                            <span id={{this.time}} class="more-dot"></span>
                            <span id={{this.time}} class="more-dot"></span>
                            <span id={{this.time}} class="more-dot"></span>
                        </button>
                        <div class="more-menu">
                            <div class="more-menu-caret">
                                <div class="more-menu-caret-outer"></div>
                                <div class="more-menu-caret-inner"></div>
                            </div>
                            <ul class="more-menu-items" tabindex="-1" role="menu" aria-labelledby="more-btn"
                                aria-hidden="true">
                                <li class="more-menu-item" role="presentation">
                                    <button type="button" class="more-menu-btn" role="menuitem" onclick="updateNote(event)">Update me</button>
                                </li>
                                <li class="more-menu-item" role="presentation" >
                                    <button type="button" id ="rome" class="more-menu-btn" role="menuitem" onclick="deleteNote(event)" >Delete</button>
                                </li>
                                <li class="more-menu-item" role="presentation">
                                    <button type="button" class="more-menu-btn" role="menuitem" onclick="toggleReminder(event)">
                                        {{#if this.remind}}
                                        Unset Reminder
                                        {{else}}
                                        Set reminder
                                        {{/if}}
                                    </button>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

Вот внешний файл js: 

function openMenu(event) {
  var elList = document.getElementsByClassName('more');
  var el;
  for (var i = 0; i < elList.length; i++) {
    el = elList[i];
    if (el.id === event.target.id)
      break;
  }

  var btn = el.querySelector('.more-btn');
  var menu = el.querySelector('.more-menu');
  var menuItems = el.querySelector('.more-menu-items');
  var visible = false;

  function showMenu(e) {
    e.preventDefault();
    if (!visible) {
      visible = true;
      el.classList.add('show-more-menu');
      menu.setAttribute('aria-hidden', false);
      menuItems.setAttribute('aria-hidden', false);
      document.addEventListener('mousedown', hideMenu, false);
    }
  }

  function hideMenu(e) {
    if (btn.contains(e.target)) {
      return;
    }
    if (visible) {
      visible = false;
      el.classList.remove('show-more-menu');
      menu.setAttribute('aria-hidden', true);
      menuItems.setAttribute('aria-hidden', true);
      document.removeEventListener('mousedown', hideMenu);
    }
  }


  btn.addEventListener('click', showMenu, false);
  el.addEventListener('mouseleave', hideMenu, false)
  $('#rome').click(alertHye);
}



function deleteNote(e) {
  console.log(e.target)
}

То, что происходит, - ничто, даже ошибка консоли. Ожидается консольный журнал.

...