（点击）事件对页面上的大多数元素不起作用 - Ionic 4

Question

背景：

有一段时间所有的点击事件都适用于我的 Ionic 应用程序，然后突然停止了。我有两个浮动操作按钮，它们曾经有工作点击事件；一个会触发一个 JS 警报弹出窗口，另一个会打开一个模态。

这些点击事件不再有效，现在唯一具有有效点击事件的元素是我的 ion-tab-buttons。

我尝试过/测试过的：

• 我曾尝试将这些元素从 ion-items 和 ion-lists 中解开，但仍然没有变化。

• 一个简单的离子按钮作为替代品，仍然没有变化。

• 将离子按钮移到卡片元素外的开始离子含量标签正下方，仍然没有变化。

• 将离子按钮移动到离子含量之外；就在标签上方，仍然没有变化。

任何帮助是极大的赞赏。

联系方式.page.html

<ion-header class="navbar">
  <div class="icons">
    <ion-buttons slot="start">
      <ion-menu-button color="tertiary"></ion-menu-button>
    </ion-buttons>
    <img src="assets/logo.png" />
  </div>
</ion-header>


<ion-content text-center>

  <ion-card>
    <ion-card-header>
      <ion-card-title>Contact Us</ion-card-title>
      <ion-card-subtitle>BOUTIQUE SOLICITORS</ion-card-subtitle>
    </ion-card-header>
    <br>
    <ion-card-content>

      <ion-label><b>Head Office: Wembley</b>
        <br>
        Boutique Immigration Solicitors, 10th Floor Tower, 1 Olympic Way, Wembley, Middlesex HA9 0NP
        DX: 51165 Wembley Park
        We are located just 5 minutes from Wembley Park Station. There is a car park behind our office.
      </ion-label>

      <br>
      <br>

      <ion-list text-left>
        <ion-item>
          <ion-label>Call us on 0800 3881 0211</ion-label>
          <ion-fab-button color="secondary" slot="end" size="small" (click)="callAlert()">
            <ion-icon name="call"></ion-icon>
          </ion-fab-button>
        </ion-item>
        <ion-item>
          <ion-label>Email at admin@boutiquesolicitors.co.uk</ion-label>
          <ion-fab-button color="secondary" slot="end" size="small" (click)="modalEmail()">
            <ion-icon name="mail"></ion-icon>
          </ion-fab-button>
        </ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card>
</ion-content>

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button (click)="about()">
      <ion-icon name="information-circle-outline"></ion-icon>
      <ion-label>About Us</ion-label>
    </ion-tab-button>
    <ion-tab-button (click)="dashboard()">
      <ion-icon color="blue" name="home"></ion-icon>
      <ion-label>Dashboard</ion-label>
    </ion-tab-button>
    <ion-tab-button class="activeTab">
      <ion-icon name="contacts"></ion-icon>
      <ion-label>Contact Us</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

联系人.page.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router'
import { CallNumber } from '@ionic-native/call-number/ngx';
import { ModalController, AlertController } from '@ionic/angular';
import { EmailPage } from '../email/email.page';

@Component({
  selector: 'app-contact',
  templateUrl: './contact.page.html',
  styleUrls: ['./contact.page.scss'],
})
export class ContactPage implements OnInit {

  constructor(private router: Router, private callNumber: CallNumber, private alertController: AlertController, private modalController: ModalController) { }

  ngOnInit() {
  }

  about() {
    console.log('clicked about')
    this.router.navigate(['members/menu/about'])
  }

  dashboard() {
    console.log('clicked dashboard')

    this.router.navigate(['members/menu/dashboard'])
  }

  async callAlert() {
    console.log('method executed')
    const callAlert = await this.alertController.create({
      message: "Are you sure you want to call Boutique Solicitors?",
      buttons: [{
        text: "Cancel",
        role: "cancel"

      },
      {
        text: "Call",
        handler: () => {this.callBS()}
      }
    ]
    });
    callAlert.present()

  }

  async callBS() {

    this.callNumber.callNumber("07847948252", false)
  .then(res => console.log('Launched dialer!', res))
  .catch(err => console.log('Error launching dialer', err))
  }

  async modalEmail() {
    const modal = await this.modalController.create ({
      component: EmailPage
    });
    modal.present();
  }

}

Answer 1

好吧，我最终自己弄清楚了。问题是，当 ion-tabs 被放置在底部的“ion-content”之外时，如果您在 Chrome Dev Tools 上检查元素，您可以看到由于某种原因它们的“点击区域”占据了整个页面，并且索引在所有其他元素的前面。尝试使用“z-index”css 属性不会解决问题。

解决方法是将 ion-tabs 包裹在 ion-toolbar 中，在关闭的“ion-content”标签下方。这会将点击区固定到受限的离子工具栏高度，从而解决问题。现在将触发所有其他页面元素（点击）事件。这也解决了选项卡何时可以阻止页面滚动的问题。

在 Android 和 iOS 上均已测试。

呸呸。