Question

我有一个带有许多链接的div。当您将焦点放在此div中的任何链接以及何时离开整个div的焦点时，如何创建事件？

<a href="">LinkA</a>
<div class="links">
  <a href="">Link1</a>
  <a href="">Link2</a>
  <a href="">Link3</a>
  <a href="">Link4</a>
</div>
<a href="">LinkB</a>

因此，如果用户使用键盘导航，当他们专注于link1时，我需要一个事件（调用函数A）。我不想要任何其他事件，如果他们保持标签或点击链接1-3但当他们跳出div或点击屏幕上的其他地方然后我需要第二个事件（调用功能B）。

Answer 1

首先，您需要为链接

设置事件侦听器

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onfocus

或使用JQuery：

https://api.jquery.com/focus/

$('a').focus(function(){ //event (funct a) });

当任何链接被“聚焦”（键盘或其他）时，此代码将运行。要阻止这种情况，你可以防止事件冒泡。

$('a').focus(function(e){ e.preventDefault() // no event });

但是，您不希望阻止第一次点击的事件传播。如果您需要完整的代码，请评论：）

然后你需要一个div的“焦点外出”事件处理程序

https://api.jquery.com/focusout/

$('div').focusout(function(){ //event (funct b) });

Answer 2

我希望这符合您的要求

$(document).on('keydown click',function(e){
   if((e.type=="click" && e.target.tagName!="A")||(e.type=="keydown" && $(e.target).index()==($(".links a").length)-1))
   {
        //two or conditions to check, if event type is click and event target's tagName != "A" i.e. anchor 
        //or event type is keydown and event has been triggered on last index
        //index calculated based on length of anchor tags present
        alert('Call function "B"'); //then call function B
   }
});

//a click focus event to only first anchor tag, which triggers irrespective of event.
$('.links a:first').on('focus',function(){
   alert('call function A'); 
});

<强> DEMO

Answer 3

我认为这是你的解决方案（很容易理解）：

var prev = 0, current = 0;
$('*').on('click focus', function () {
    current = $(this).parent('.links').length;
    if(!prev && current){
        console.log('focus');   // Here call function A
    }else if(prev && !current){
        console.log('blur');    // Here call function B
    }
    prev = current;
});

DEMO

使用jQuery检测包含多个链接的元素的focusin和focusout？

3 个答案: