CODEWITHSUNDEEP
javascriptmouseeventaddeventlistener
Bob Napkin
Bob Napkin

Reputation: 566

Disable hover when key pressed

I implement a custom dropdown, and I have a problem when I move by keyboard: hover works too and I don't know how to disable it. I've paste my code here http://jsfiddle.net/4o0bcv1d/, but here my code works correct. When I copy code to index.html - hover works again, when I move by keyboard. How I can fix it?

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

Upvotes: 2

Views: 3012

Answers (2)

Darlan Mendon&#231;a
Darlan Mendon&#231;a

Reputation: 483

you can set the css selector, instead :hover, anything like :hover:not(.unhover), the class .unhover can be added using js

Upvotes: 0

Diptendu
Diptendu

Reputation: 2158

You can use the CSS pointer-events feature to disable hovering on any of the page element. On keypress you need to add this attribute to the body tag like this

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

and again on key release you could remove this property so that mouse over starts working again. So at key release you need to do 

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

The pointer-events property allows to exclude an HTML element from being a mouse target. All the descendant elements are also excluded from being a mouse target unless the pointer-events property has been explicitly overridden for that node.

Upvotes: 3

Related Questions