javascript - เหตุการณ์ (click) ไม่ทำงานบนส่วนใหญ่ขององค์ประกอบในหน้า - Ionic 4

ภูมิหลัง:

เป็นเวลาหนึ่ง เหตุการณ์คลิกทั้งหมดทำงานได้สำหรับแอป Ionic ของฉัน จากนั้นอยู่ๆ ก็หยุดทำงาน ฉันมีปุ่มการกระทำลอยตัวสองปุ่มที่เคยมีเหตุการณ์คลิกทำงาน หนึ่งปุ่มจะเรียกกล่องแจ้งเตือน JS และอีกปุ่มจะเปิดโมดอล

เหตุการณ์คลิกเหล่านี้ใช้การไม่ได้อีกต่อไป องค์ประกอบเดียวที่ยังมีเหตุการณ์คลิกทำงานได้ตอนนี้คือปุ่ม ion-tab ของฉัน

สิ่งที่ฉันได้ลอง/ทดสอบ:

• ฉันได้พยายามแกะองค์ประกอบเหล่านี้ออกจาก ion-items และ ion-lists แล้ว แต่ก็ยังไม่มีการเปลี่ยนแปลง

• ปุ่มไอออนที่เรียบง่ายเป็นตัวทดแทน แต่ก็ยังไม่มีการเปลี่ยนแปลง

• การย้ายปุ่มไอออนออกจากองค์ประกอบการ์ดไปไว้ด้านล่างของแท็กเปิด ion-content ยังไม่มีการเปลี่ยนแปลง

• การย้าย ion-button ออกไปนอก ion-content; อยู่เหนือแท็บเล็กน้อย ยังคงไม่มีการเปลี่ยนแปลง

ความช่วยเหลือใด ๆ จะได้รับการชื่นชมอย่างมาก

contact.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 [email </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>

contact.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();
  }

}

คำตอบ #1

เอาล่ะ สุดท้ายฉันก็หาวิธีแก้เอง ปัญหาคือเมื่อวาง ion-tabs นอก 'ion-content' ที่ด้านล่าง ถ้าคุณตรวจสอบ element ใน Chrome Dev Tools คุณจะเห็นว่า ด้วยเหตุผลบางอย่าง 'click-zone' ของมันครอบคลุมทั้งหน้า และอยู่ด้านหน้าของทุก element อื่น ๆ การพยายามใช้ property ของ CSS 'z-index' จะไม่สามารถแก้ไขปัญหาได้

วิธีแก้ไขคือการห่อแท็บ ion-tabs ไว้ภายใน ion-toolbar ใต้แท็กปิด 'ion-content' วิธีนี้จะจำกัดโซนการคลิกให้อยู่ในความสูงของ ion-toolbar ซึ่งจะแก้ปัญหาได้ เหตุการณ์ (คลิก) ขององค์ประกอบหน้าอื่นๆ ตอนนี้จะทำงานตามปกติ วิธีนี้ยังแก้ปัญหาในกรณีที่แท็บสามารถป้องกันไม่ให้หน้าสามารถเลื่อนลงได้ด้วย

ทดสอบทั้งบน Android และ iOS

สวัสดี สวัสดี

คำตอบ #2

คำตอบที่ให้มาที่นี่ไม่ถูกต้อง มีความเข้าใจผิดเกี่ยวกับวิธีการทำงานของแท็บจาก OP แท็บมีไว้สำหรับเป็นส่วนติดต่อผู้ใช้ของหน้าเต็ม และไม่ควรถูกฝังในหน้า/ส่วนประกอบอื่น ๆ ซึ่งหมายความว่าพวกมันควรเป็นเนื้อหาเพียงอย่างเดียวในหน้า

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

ด้วยวิธีนี้แท็บจะรับผิดชอบในการแสดงเนื้อหาแบบซ้อน และเหตุการณ์ต่าง ๆ สามารถทำงานได้ตามที่คาดไว้