Question

在我的屏幕上，我显示了一些像这样的输入。

<span>
<input #field (keyup.enter)="setName(item,field.value); newfolder = null" type="text" class="top-of-dom folder_name_text_box">
    <button class="top-of-dom" [ngClass]="{'active': item.folder_type=='category'}" (click)="item.folder_type='category'">single</button>
    <button class="top-of-dom" [ngClass]="{'active': item.folder_type=='label'}" (click)="item.folder_type='label'">multi</button>
    <i class="fa fa-check cursor-pointer top-of-dom" (click)="setName(item,field.value);" aria-hidden="true"></i>
    <i class="fa fa-times cursor-pointer top-of-dom" (click)="deleteNode(item.id);"></i>
</span>

我想做的就是当用户失去焦点并且不点击check r times图标时。应该触发一个事件。

简单来说，如果用户按下除了这五个元素以外的任何内容，我想调用一个事件。我尝试将(blur)="SomeMethod"应用于上面的span，但它没用。即使点击了同一组中的input，在i代码上应用它也只会调用该事件

Answer 1

转到

(clickOutside)="something"

跨度

检查here

Answer 2

使用

<span tabindex=0></span>

让你专注于你的跨度然后你可以调用模糊方法。

所以基本上当焦点丢失时会触发模糊事件。默认情况下，div或span元素不能在第一个位置具有焦点，因此不会丢失。

这里如果你在一个跨度上设置tabindex，那么它可以获得焦点，你可以在模糊时调用你的函数。这也适用于Tab键按下事件。

了解更多信息fiddle

Answer 3

它是在核心js中完成的，而不是角度的，但你可以在角度refer中使用相同的逻辑，试试这个

document.body.addEventListener("click", function() {
    var parents = [];
    var p = event.target;

    while (p !== document) {
        var o = p; 
        if(o.className.indexOf("input-items") !== -1) break;
        p = o.parentNode;
    }
    
    if(p === document) {
      // your code here
      console.log("here");
    }
})

<body>
  <span class="input-items">
    <input #field (keyup.enter)="setName(item,field.value); newfolder = null" type="text" class="top-of-dom folder_name_text_box">
      <button class="top-of-dom" [ngClass]="{'active': item.folder_type=='category'}" (click)="item.folder_type='category'">single</button>
      <button class="top-of-dom" [ngClass]="{'active': item.folder_type=='label'}" (click)="item.folder_type='label'">multi</button>
      <i class="fa fa-check cursor-pointer top-of-dom" (click)="setName(item,field.value);" aria-hidden="true"></i>
      <i class="fa fa-times cursor-pointer top-of-dom" (click)="deleteNode(item.id);"></i>
  </span>
  <h1> click here </h1>
  <h1> click here </h1>
  <h1> click here </h1>
  <h1> click here </h1>
</body>

在span span4中的所有输入上应用模糊

3 个答案: