javascript - 即使使用 div 覆盖也无法在 iframe 上注册点击

Question

我在我的网站上嵌入了一个 iframe，如下所示：

HTML

<div style="position: relative; background-color: #8c9099; height: 300px; z-index: 2"
  (click)="setSelectedCourseElementFiddleUid()">
  <iframe width="100%" height="300px"
    style="z-index: 1; position: absolute; top: 0; left: 0; height: 300px; display: inline-block"
    src="//jsfiddle.net/tutorpass/wLrk94mp/embedded/html,css,result/?accentColor=335eea"
    allowfullscreen="allowfullscreen" allowpaymentrequest [attr.frameborder]="0"></iframe>
</div>

JavaScript

import { Component, VERSION } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular " + VERSION.major;

  setSelectedCourseElementFiddleUid() {
    console.log("hello");
  }
}

但是“点击”本身似乎没有注册，即使是 div 覆盖。关于如何解决这个问题的任何想法？

我在这里上传了一个 Stackblitz：https ://stackblitz.com/edit/angular-ivy-jupmvt 。

标签： javascriptangulartypescriptiframe