（點擊）事件不適用於頁面上的大多數元素 - Ionic 4

Question

背景：

一段時間以來，所有點擊事件都在為我的 Ionic 應用程序工作，然后突然停止。 我有兩個浮動操作按鈕，它們曾經有有效的點擊事件； 一個會觸發 JS 警報彈出窗口，另一個會打開一個模式。

這些點擊事件不再有效，現在唯一具有有效點擊事件的元素是我的 ion-tab-buttons。

我嘗試過/測試過的內容：

• 我已經嘗試將這些元素從離子項和離子列表中解包出來，但仍然沒有變化。

• 一個簡單的離子按鈕作為替代品，仍然沒有變化。

• 將 ion-button 移到 card 元素的正下方，就在打開的 ion-content 標簽下方，仍然沒有變化。

• 將離子按鈕移到離子含量之外； 就在選項卡上方，仍然沒有變化。

任何幫助是極大的贊賞。

聯系.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 上均已測試。

呸呸。

Answer 2

此處提供的答案不正確。 關於選項卡如何從 OP 工作存在誤解。 選項卡旨在成為整頁 UI 組件，並不意味着嵌入其他頁面/組件中。 這意味着它們應該是頁面中的唯一內容。

<ion-tabs>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="triangle"></ion-icon>
      <ion-label>Tab 1</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <ion-icon name="ellipse"></ion-icon>
      <ion-label>Tab 2</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="square"></ion-icon>
      <ion-label>Tab 3</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>

這樣，選項卡負責呈現嵌套內容，並且事件按預期工作。

Answer 3

上面@mhartington 的答案是正確的答案。 對於 Angular，tabs 應該是將其他頁面作為tabs-routing.module.ts子模塊加載的頁面。

Answer 4

好吧，我最終自己弄明白了。 問題是，當離子標簽位於底部的“離子內容”之外時，如果您檢查 Chrome 開發工具上的元素，您會看到由於某種原因它們的“點擊區域”占據了整個頁面，並且索引在所有其他元素之前。 嘗試使用“z-index”css 屬性無法解決問題。

解決方法是將 ion-tabs 包裹在 ion-toolbar 中，位於結束的“ion-content”標簽下方。 這會將點擊區域固定為受限的離子工具欄高度，從而解決了該問題。 現在將觸發所有其他頁面元素（單擊）事件。 這也解決了選項卡何時可以阻止頁面滾動的問題。

在 Android 和 iOS 上測試。

巧巧。

這正是我正在尋找的謝謝