具有role =“ menuitem”的按钮上的onclick事件未触发,但鼠标悬停已触发。
我尝试了各种事情,例如不使用外部函数,而是发出警报,但没有好处。
{{#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)
}
发生了什么,什么都没有,甚至没有控制台错误。应该是控制台日志。