为什么我的点击事件是最后一个事件？答案

【问题标题】：Why is my click event is taking last event?为什么我的点击事件是最后一个事件？
【发布时间】：2019-08-29 10:42:38
【问题描述】：

当我点击 sort-asc 或 sort-desc 字体真棒图标时，总是会触发最后一个事件。可能出了什么问题。

自定义 css 添加到堆栈向上和向下箭头。

     .custom{
         margin-left: -9px;
      }

      <table class="table table-stripped mt-2">
     <tr>
    <th *ngFor="let col of colNames" >
      {{col["vname"]}}
      <span>
          <i (click)="$event.stopPropagation();sortAsc(col)" class="fa fa-sort-asc"></i>
          <i (click)="$event.stopPropagation();sortDesc(col)" class="fa fa-sort-desc custom"></i>
      </span> 
    </th>

  </tr>
  <tr *ngFor="let movie of content">
    <td>{{movie.id}}</td>
    <td>{{movie.title}}</td>
    <td>{{movie.rank}}</td>
  </tr>
</table>

【问题讨论】：

是 sortAsc 和 sortDesc 方法的问题，还是字体图标的问题？将更改为
如果我删除自定义类它正在工作，但我需要样式
你能显示sortAsc和sortDesc的代码吗？
sortDesc(col){ console.log(col); }
通过编辑添加原问题的所有代码

【解决方案1】：

好的，现在我明白了。您希望将图标堆叠在一起，以便您可以按 asc och desc 箭头。但是随后两个点击事件都会命中，因为您添加了自定义边距：-9px。这是因为<i> 元素位于彼此之上。

解决办法：

它总是 desc 或 asc。它不能是其他任何东西，因此您不需要同时显示两者。当您第一次获得列表时，它通常是描述的？所以只显示 asc 符号。当您列出 id asc 时，仅显示 desc 图标。

例如：windows 文件资源管理器是这样工作的

【讨论】：

谢谢，如果显示单个元素，则不需要自定义 css。谢谢
欢迎您！而且最终用户点击它会更容易，因为这样点击区域可以更大