javascriptjqueryhtmlcssjquery-focusout

jquery focus to sibling without focusing out from parent

I am try to iterate through all li elements in ul on keydown event by firing focus() event for next sibling li. In this process, I dont want to focus out from parent ul. But its not happening. Even changing focus on siblings is causing focusout event on parent. I want that only when someone clicks somewhere else on the screen should focus out of parent be fired.

var KEY_DOWN=40;

$(document).on('keydown', 'li', function(e){
	let keyCode = e.keyCode || e.which;
	if(keyCode == KEY_DOWN)
	{
		if($(this).next().length != 0)
		{
			$(this).next().focus();
		}
		else
		{
			$(this).parent().children().first().focus();
		}
		return false;
	}
});

$(document).on('focusout','ul', function(e)
{
	console.log('focused')
});
li
{
  border: 1px solid black;
}

li:focus
{
  background: #999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul tabindex="-1">
<li tabindex="-1">First</li>
<li tabindex="-1">Second</li>
<li tabindex="-1">Third</li>
</ul>

In the snippet, focused in getting printed on every down key press. How to solve this situation.

Solution

  • Only way I found was to disable focusout event on parent ul when I am trying to focus any li

    var KEY_DOWN=40;

$(document).on('keydown', 'li', function(e){
	let keyCode = e.keyCode || e.which;
	if(keyCode == KEY_DOWN)
	{
                $(document).off('blur','ul', doWork);
		if($(this).next().length != 0)
		{
			$(this).next().focus();
		}
		else
		{
			$(this).parent().children().first().focus();
		}
                $(document).on('blur','ul', doWork);
		return false;
	}
});

doWork = function(e)
{
	console.log('focused')
};

$(document).on('blur','ul', doWork);
    li
{
  border: 1px solid black;
}

li:focus
{
  background: #999;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul tabindex="-1">
<li tabindex="-1">First</li>
<li tabindex="-1">Second</li>
<li tabindex="-1">Third</li>
</ul>