Question

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

（点击）没有触发：

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

但它可以在这里工作：

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

任何人都可以解释这种行为吗？为什么需要设置位置样式才能（点击）触发？

我错过了什么吗？

Answer 1

您的代码段看起来很不错！

问题出在你的CSS样式中。您的<div>可能会继承不同的position值，或者只是 - 会追溯另一个元素，该元素阻止您的<div>（不允许点击）。

将位置更改为relative它的工作原理很可能是因为此位置启用了z-index并将您的<div>移到了阻止它的另一个元素上。

这应该足以让你弄清楚。但如果你想要更详细的答案 - 请分享你的CSS。

Answer 2

遇到相同的问题，问题是我命名HTML元素和方法相同。

就是这样：

mycomponent.html

<div #doSomething>
</div>

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

mycomponent.ts

doSomething() {
    // ...
}

Answer 3

我在iPhone上也经常遇到类似的问题。基本上，指针事件导致卡在组件上。因此，我只对标签上的（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平台上都可以正常工作。

Answer 4

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

^这对我有用

Answer 5

我在 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>

为什么Angular2（click）事件没有在<div>上触发？

5 个答案: