Javascript 按此键时禁用悬停
我实现了一个自定义下拉菜单,当我通过键盘移动时,我遇到了一个问题:hover也可以工作,我不知道如何禁用它。我已经在这里粘贴了我的代码,但在这里我的代码工作正常。当我将代码复制到index.html时,当我通过键盘移动时,悬停再次起作用。 我怎么能修好它Javascript 按此键时禁用悬停,javascript,mouseevent,addeventlistener,Javascript,Mouseevent,Addeventlistener,我实现了一个自定义下拉菜单,当我通过键盘移动时,我遇到了一个问题:hover也可以工作,我不知道如何禁用它。我已经在这里粘贴了我的代码,但在这里我的代码工作正常。当我将代码复制到index.html时,当我通过键盘移动时,悬停再次起作用。 我怎么能修好它 var doc = document; var keydown_count = -1; var dropdown_content = doc.querySelector('.dropdown-content'); var dropdown_i
var doc = document;
var keydown_count = -1;
var dropdown_content = doc.querySelector('.dropdown-content');
var dropdown_items = doc.querySelectorAll('.dropdown-item');
var dropdown_items_length = dropdown_items.length;
var clear_navigation_hover = function () {
for (var i = 0; i < dropdown_items_length; ++i) {
dropdown_items[i].classList.remove('dropdown-item--hover');
};
}
var navigation_hover_by_keydown = function (event) {
var event = event || event.window;
var UP = 38;
var DOWN = 40;
var SCROLL_STEP = 66;
if (event.keyCode === UP) {
keydown_count--;
if (keydown_count < 0) {
keydown_count = dropdown_items_length - 1;
dropdown_content.scrollTop = 66 * dropdown_items_length;
}
if (keydown_count < (dropdown_items_length - 3)) {
dropdown_content.scrollTop -= 66;
};
} else if (event.keyCode === DOWN) {
keydown_count++;
if (keydown_count >= dropdown_items_length) {
keydown_count = 0;
dropdown_content.scrollTop = 0;
}
if (keydown_count > 3) {
dropdown_content.scrollTop += 66;
};
}
clear_navigation_hover();
dropdown_items[keydown_count].classList.add('dropdown-item--hover');
}
var dropdown_input = doc.querySelector('.dropdown-input');
dropdown_input.addEventListener('keydown', navigation_hover_by_keydown, false);
var navigation_hover_by_hover = function () {
clear_navigation_hover();
this.classList.add('dropdown-item--hover');
keydown_count = this.getAttribute('data-index');
console.log('hover');
}
for (var i = 0; i < dropdown_items_length; ++i) {
dropdown_items[i].addEventListener('mouseover', navigation_hover_by_hover, false);
}
var doc=单据;
var keydown_计数=-1;
var dropdown_content=doc.querySelector('.dropdown content');
var dropdown_items=doc.querySelectorAll('.dropdown item');
var dropdown_items_length=dropdown_items.length;
var clear\u navigation\u hover=函数(){
对于(变量i=0;i=下拉项长度){
向下键计数=0;
下拉菜单\u content.scrollTop=0;
}
如果(键控计数>3){
下拉菜单_content.scrollTop+=66;
};
}
清除导航和悬停();
下拉项[keydown\u count].classList.add('dropdown-item--hover');
}
var dropdown_input=doc.querySelector('.dropdown input');
下拉式输入。addEventListener('keydown',导航\u悬停\u by \u keydown,false);
var navigation\u hover\u by\u hover=函数(){
清除导航和悬停();
this.classList.add('dropdown-item--hover');
keydown_count=this.getAttribute('data-index');
console.log('hover');
}
对于(变量i=0;i
您可以使用CSS功能禁用在任何页面元素上悬停。在按键时,您需要像这样将此属性添加到body标记
document.body.style.pointerEvents = 'none';
在按键释放时,您可以再次删除此属性,以便鼠标悬停再次开始工作。所以在密钥发布时,您需要执行以下操作
document.body.style.pointerEvents = 'auto';
指针事件属性允许将HTML元素排除在鼠标目标之外。所有子元素也被排除在鼠标目标之外,除非该节点的指针事件属性被显式重写。您可以设置css选择器,而不是:hover,类似于:hover:not(.unhover),类。unhover可以使用js添加