如何创建带有坐标定义的可点击区域的自定义按钮？(离子)

<div class="custom-button" (click)="handleClick($event)">
  点击我
</div>

.custom-button {
  width: 100px;
  height: 50px;
  background-color: blue;
  color: white;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}

handleClick(event: MouseEvent) {
  const container = event.target as HTMLElement;
  const rect = container.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;

  if (x >= 0 && x <= rect.width && y >= 0 && y <= rect.height) {
    // 在可点击区域内执行操作
    console.log('按钮被点击了！');
  }
}