为什么在<div>中使用Angular2的(click)事件不触发？

Question

我发现了一个Angular2的奇怪行为：

这个代码块中的(click)没有被触发：

<div (click)="test()">test</div>

但这里可以正常工作：

<div style="position: relative;" (click)="test()">test</div>

有人能解释这种行为吗？为什么必须设置“position”样式才能触发“(click)”事件？

我有什么遗漏吗？

- Ziv

---

你能在 Plunker 上重现这个问题吗？ - eko

请重现它。我相信问题存在于您的标记和样式中。 - yurzui

你的 component.ts 模块声明在哪里等等。只有一行 HTML，没办法了。 - Aravind

现在的Angular默认使用stopPropagation，并记得在选定的元素上放置ID或关键字。 - nativelectronic

Answer 1

你的代码片段看起来很不错！

问题在于你的CSS样式。你的<div>可能要么继承了不同的position值，要么- 在另一个元素后面，这个元素阻挡了你的<div>（不允许它被点击）。

通过将位置改为relative，它可以工作，最可能是因为这个位置启用了z-index并将你的<div>移动到阻挡它的其他元素的顶部。

这应该足以让你自己解决问题。但如果你想要更详细的答案，请分享你的CSS。

- Kaloyan Kosev

---

谢谢。这是一个与CSS有关的问题。我正在使用Angular-cli，在一个新项目中一切正常。当我添加bootstrap4时，我看到了这种行为，可能是由于bootstrap的默认CSS引起的。 - Ziv

我在使用Angular 4和Bootstrap 4时遇到了相同的问题。 - Frank Cannon

Answer 2

面对相同的问题，问题出在我将HTML元素和方法命名为相同的名称。

具体来说就是这样：

mycomponent.html

<div #doSomething>
</div>

<div (click)="doSomething();">
</div>

mycomponent.ts

doSomething() {
    // ...
}

- MMalke

Answer 3

我也经常在 iPhone 上遇到类似的问题。基本上是 pointer-event 导致组件卡住了。所以我只需在所有应用了 (click) 属性的标签上应用以下修复措施即可。

    a,
    div,
    ion-item,
    .item-md,
    .item-ios,
    .segment-button,
    .select-md
    .select-ios,
    .button-ios,
    .button-md,
    .searchbar-md,
    .searchbar-ios {
        pointer-events: auto !important;
    }

现在它在Android和IOS平台上都运行良好。

- Atif Hussain

Answer 4

我在 div 标签内添加了一个标签。

<div class="item" *ngFor="let item of curriculumArray">
    <a (click)="goToDetail(item.curriculumId)">
    <p class="p-title">{{ item.curriculumName }}</p>
    <p class="p-description">{{ item.description }}</p>
    <div class="icon-button">
      <img
        class="delete"
        title="Xóa chương trình"
        src="../../../assets/icon/delete_icon.png"
        alt="delete button"
      />
      <img
        class="edit"
        title="Chỉnh sửa chương trình"
        src="../../../assets/icon/edit_icon.png"
        alt="edit button"
      />
    </div>
    </a>
  </div>

- huonggiang141806

Answer 5

<div (click)="myFunction()"> 
<my-component></my-component>
</div>

^ 这对我有用

- dada delos angeles