如何确定给定div中的某些内容是否具有焦点？

Question

使用angularjs,我正在显示这样的2级列表

- first main item
  - first subitem of the first main item
  - second subitem of the first main item
  - AN EMPTY ITEM AS PLACEHOLDER TO ENTER THE NEXT SUBITEM
- second main item
  - first subitem of the second main item
  - second subitem of the second main item
  - AN EMPTY ITEM AS PLACEHOLDER TO ENTER THE NEXT SUBITEM

为了节省空间,我只想在相应的任何东西div都有焦点的情况下展示PLACEHOLDER ,这样只有一个这样的占位符.我知道有ngFocus,但我更喜欢比创建大量事件处理程序更简单的东西.也许是这样的:

<div ng-focus-model="mainItem.hasFocus" ng-repeat="mainItem in list">
   ... main item line
   ... all subitems
</div>

单向绑定就足够了,因为我不需要设置焦点.

Answer 1

这里的问题如下:我们希望避免向每个子节点添加事件侦听器,但只将其添加到父节点.家长将负责采取适当的行动.对此的一般解决方案是使用均匀传播(委托).我们只向父节点附加一个侦听器,当子节点上发生事件时(在此示例中关注输入元素),它将冒泡到父节点,父节点将执行侦听器.

这是指令:

app.directive('ngFocusModel', function () {
    return function (scope, element) {

      var focusListener = function () {
          scope.hasFocus = true;
          scope.$digest();
      };

      var blurListener = function () {
          scope.hasFocus = false;
          scope.$digest();
      };


      element[0].addEventListener('focus', focusListener, true);
      element[0].addEventListener('blur', blurListener, true);
   };
});

该指令侦听事件并相应地设置范围的值,因此我们可以进行条件更改.

这里有几点需要注意.

focus并且blur事件不会"冒泡",我们需要使用"事件捕获"来捕获它们.这就是为什么element.on('focus/blur')不使用(它不允许捕获,afaik)但一种addEventListener方法.此方法允许我们通过将第三个参数设置为false或true相应地指定是否将在"事件冒泡"或"事件捕获"上执行侦听器.

我们可以使用focusin和focusout"冒泡"的事件,不幸的是这些在Firefox(focusin和focusout)中不受支持.

这是一个实施的plunker.

更新: 我想到这可以使用:focus伪类使用纯CSS来完成,唯一的缺点是占位符需要相对于输入元素处于适当的位置(兄弟).见codepen.