Question

我有两个函数，第一个是myFunction（）和myDiv（）

<div (click)="myDiv()">
   <button (click)="myFunction()"> Submit </button>
</div>

在AppComponent中，我有两个函数的定义：

myFunction()
{
  console.log("I am in myFunction");
}

myDiv()
{
  console.log("I am in myDiv");
}

输出结果为：

我在myFunction

我在myDiv

为什么myFunction在myDiv之前首先运行？是什么原因？

Answer 1

那是因为click事件正在冒泡

<html>(document)                                              
                                                       /\
  <div (click)="myDiv()">                              || 

                                                       /\
     <button (click)="myFunction()"> Submit </button>  ||
  </div>

另见

https://www.quirksmode.org/js/events_order.html

如果您想首先调用myDiv处理程序，您应该在捕获阶段中捕获事件

el.addEventListener('click', myDiv, true); 
                                     \/
                                  useCapture

AFAIK angular不支持useCapture选项。这是 workaround

为什么内部函数调用从html运行首先比父函数调用Angular 2

1 个答案: