绝对定位后的元素无法触发点击事件

最新推荐文章于 2023-11-03 17:52:23 发布

HerayChen

最新推荐文章于 2023-11-03 17:52:23 发布

阅读量4k

点赞数 6

分类专栏：笔记文章标签： pointer-events 定位点击事件

本文链接：https://blog.csdn.net/qq_45832807/article/details/119637243

版权

笔记专栏收录该内容

145 篇文章 6 订阅

订阅专栏

本文介绍了一个在 Ionic 框架中处理点击事件穿透的问题，通过添加 'pointer-events:none' 和 'pointer-events:auto' 样式属性，确保绝对定位层下和上的元素都能正确响应点击事件。示例代码展示了如何在 ion-slides 组件中应用这些样式，以实现用户友好的交互体验。

摘要由CSDN通过智能技术生成

解决方法

可以通过给绝对定位的层多加一个样式：" pointer-events:none; " 这样绝对定位层下的元素就可以点击了；如果在绝对定位层上存在能够点击的元素，在添加" pointer-events:none; " 后将同样不起作用；为了避免此情况，可以给需要操作的元素设置" pointer-events:auto" 即可。

详情

ionic试例：

<ion-app>
    <ion-content fullscreen class="ion-padding-bottom" scroll-y="false">
        <ion-button class="skip-tag" shape="round" (click)="autoLogin()">
            {{totalTime}}跳过
        </ion-button>
        <ion-slides pager="true" class="welcome" [class.hidden-page]="showPage" [options]="slideOpts" (ionSlideTouchEnd)="reachEnd()" #slides>
            <ion-slide>
                <img src="/assets/imgs/welcome/welcome1.png"/>
            </ion-slide>
            <ion-slide>
                <img src="/assets/imgs/welcome/welcome2.png"/>
            </ion-slide>
            <ion-slide class="last-item">
                <img src="/assets/imgs/welcome/welcome3.png"/>
                <ion-button routerLink="login">立即体验</ion-button>
            </ion-slide>
        </ion-slides>
    </ion-content>
</ion-app>

ion-slides {
        height: 100%;
}

ion-content {
    // 阻止点击、状态变化和鼠标指针变化
    pointer-events:none;
}

.skip-tag {
    position: absolute;
    right: 18px;
    top: 18px;
    --padding-start: 8px;
    --padding-end: 8px;
    // 定位元素点击事件不触发
    pointer-events:auto;
    height: 23px;
    --background: rgba(0, 0, 0, 0.3);
    --background-activated: rgba(0, 0, 0, 0.6);
    --color: #fff;
    font-size: 12px;
}

.swiper-slide {
    img {
        width: 320px;
        height: 440px;
    }
}

.last-item {
    position: relative;

    ion-button {
        position: absolute;
        bottom: 36px;
        width: 145px;
        height: 36px;
        background: var(--linear-bgcolor);
        //background: linear-gradient(270deg, #5FB2FB 0%, #3183F5 100%);
        border-radius: 4px;
        font-size: 16px;
        font-weight: 500;
        color: #FFFFFF;

        &::part(native) {
            background: var(--linear-bgcolor);
        }
    }
}

.hidden-page {
    ::ng-deep {
        .swiper-pagination {
            display: none !important;
        }
    }
}

import {AfterViewInit, Component, ViewChild} from '@angular/core';
import {IonSlides, NavController} from '@ionic/angular';

@Component({
    selector: 'app-welcome',
    templateUrl: './welcome.component.html',
    styleUrls: ['./welcome.component.scss'],
})
export class WelcomeComponent implements AfterViewInit {

    @ViewChild(IonSlides) slides: IonSlides;

    slideOpts = {
        zoom: false
    };

    showPage = false;

    totalTime = 3;

    constructor(public nav: NavController) {
    }

    /**
     * 3秒跳转到登陆页倒计时
     */
    ngAfterViewInit(): void {
        const welcomeInterval = setInterval(() => {
            this.totalTime--;
            if (this.totalTime <= 0) {
                clearInterval(welcomeInterval);
                this.autoLogin();
            }
        }, 1000);
    }

    reachEnd(): void {
        // this.slides.pager = false;
        this.slides.getActiveIndex().then(index => {
            if (index === 2) {
                this.showPage = true;
            } else {
                this.showPage = false;
            }
        });
    }

    /**
     * 自动跳转点击事件
     */
    autoLogin(): void {
        this.nav.navigateRoot(['/login']);
    }
}