禁用悬停时，按下键

我实现一个自定义的下拉列表中，我有一个问题，当我移动通过键盘：悬停工作过，我不知道如何禁用它。我在这里粘贴了我的代码http://jsfiddle.net/4o0bcv1d/，但这里我的代码工作正确。当我将代码复制到index.html时 - 悬停再次运行，当我通过键盘移动时。我该如何解决它？禁用悬停时，按下键

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); 
}

来源

2015-07-01 Bob Napkin

可以使用CSS pointer-events功能禁用徘徊在任何页面元素。在按键则需要将此属性添加到body标签这样

document.body.style.pointerEvents = 'none';

，并再次释放键，你可以让鼠标再次开始工作删除此属性。因此，在键释放你需要做的

document.body.style.pointerEvents = 'auto';

指针的事件属性允许从一个鼠标目标排除HTML元素。所有后代元素也被排除为鼠标目标，除非已为该节点明确覆盖了pointer-events属性。

来源

2015-07-01 05:02:44 Diptendu

加入这一行我们的代码

$（本）.unbind（ '的mouseenter鼠标离开'）

来源

2015-07-01 04:24:44 abhi312

您可以设置CSS选择器，而不是：悬停，类似于：hover：not（.unhover），类可以使用js添加.unhover

来源

2017-01-05 10:50:24

禁用悬停时，按下键

回答

相关问题