禁用懸停時，按下鍵

我實現一個自定義的下拉列表中，我有一個問題，當我移動通過鍵盤：懸停工作過，我不知道如何禁用它。我在這裏粘貼了我的代碼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

禁用懸停時，按下鍵

回答

相關問題