I am navigating the html with arrow keys(up, down) focus was going to each div element. I want to skip the focus of one div element in the html page

Question

<div class="first">First</div>
<div class="second">Second</div>
<div class="third">Third</div>

I am navigating the html with arrow keys(up, down) focus was going to each div element. I want to skip the focus of one div element in the html page

I tried with the below code

$('.second').onKeyDown= {e => {
if(e.key == "ArrowUp" || e.key == "ArrowDown") {
e.stopPropagation();
e.PreventDefault();
return false:
}
e.stopPropagation();
}}

Answer 1

not sure if that is what you want, but you can make elements unfocusable. See here for refference: https://developer.mozilla.org/nl/docs/Web/HTML/Global_attributes/tabindex

<div class="first">First</div>
<div class="second" tabIndex="-1">Secoond</div>
<div class="third">Third</div>

Note that an element with a negative tabindex is still focusable, it just cannot be reached using sequential focus navigation (i.e. tabbing)

Answer 2

from: How to disable all div content

$("#mydiv").addClass("disabledbutton");

css

.disabledbutton {
    pointer-events: none;
    opacity: 0.4;
}