精华内容
下载资源
问答
  • " 这样绝对定位层下的元素就可以点击了;如果在绝对定位层上存在能够点击的元素,在添加" pointer-events:none; " 后将同样不起作用;为了避免此情况,可以给需要操作的元素设置" pointer-events:auto" 即可。 ...

    解决方法

    可以通过给绝对定位的层多加一个样式:" 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']);
        }
    }
    
    展开全文
  • 元素开启定位点击事件失效是因为被上层元素遮挡,点击到的元素此时不是绑定了事件的元素,解决的办法是提升该元素的层级 position: absolute; z-index: 99;

    元素开启定位后点击事件失效是因为被上层元素遮挡,点击到的元素此时不是绑定了事件的元素,解决的办法是提升该元素的层级

    position: absolute;
    z-index: 99;
    
    展开全文
  • 当元素的bfc层级设置为z-index:-1后,这个元素的层级就是当前浏览器的3d视图中z轴层级最低的元素,所以这个时候从视觉效果看起来是点击绝对定位元素,但实际上点击事件是触发的html根元素下的bfc渲染区的元素 ...

    原因分析:

    当元素的bfc层级设置为z-index:-1后,这个元素的层级就是当前浏览器的3d视图中z轴层级最低的元素,所以这个时候从视觉效果看起来是点击了绝对定位元素,但实际上点击事件是触发的html根元素下的bfc渲染区的元素

    解决方法:

    1.使用事件捕获机制,给被点击的空白区域的元素设置事件监听,将事件传递给绝对定位元素(不推荐)

    2.保持绝对定位元素的默认层级,将被覆盖的元素的层级设为z-index:1以及以上,使该元素的z轴层级高于绝对定位元素(推荐)

    注:

    第二种方法只适用于微信小程序

    因为非小程序浏览器的原生的浏览器中遵循了W3C标准,它们绘制的绝对绝对定位元素只能按照默认顺序渲染叠放,不可通过z-index捕获并改变渲染叠放的顺序

    展开全文
  • 在没有背景和图片填充的情况下,Firefox 和Chrome 下不能直接点击绝对定位层下的元素(比如连接,按钮),下面的元素会被上面的绝对定位层挡住。IE下可以直接点击绝对定位层下面的元素。 解决办法 对于这种问题需要...

    问题

    在没有背景和图片填充的情况下,Firefox 和Chrome 下不能直接点击绝对定位层下的元素(比如连接,按钮),下面的元素会被上面的绝对定位层挡住。IE下可以直接点击绝对定位层下面的元素。

    解决办法

    对于这种问题需要用到一个CSS3的属性,可以通过给绝对定位的层多加一个样式:" pointer-events:none; " 这样绝对定位层下的元素就可以点击了。

    这其中有一个需要注意的地方,如果在绝对定位层上存在能够点击的元素,在添加" pointer-events:none; " 后将同样不起作用。

    为了避免此情况,可以给需要操作的元素设置" pointer-events:auto" 即可。

    属性介绍

    pointer-events: auto | none | visiblePainted | visbleFill |
    visibleStroke | visible | painted | fill | stroke | all | inherit

    常用的只有 auto / none 两个属性值,其他的是针对 SVG 的。

    auto:

    效果和没有定义" pointer-events:none; " 属性相同,鼠标不会穿透当前层。在SVG中,该值和 visiblePainted 的效果相同。

    none:

    元素不再是鼠标事件的目标,鼠标不再监听当前层而去监听下面层中的元素。但是如果它的子元素设置了" pointer-events" 的其他属性值,比如 auto,鼠标事件仍会监听这个子元素。

    展开全文
  • absolute绝对定位的非绝对定位用法

    千次阅读 2015-06-04 10:05:06
    一、absolute绝对定位的流行用法 一般而言,我们会用...例如,lightbox效果就是使用的绝对定位,例如新浪微博的弹出提示信息,我要转发李冰冰姐姐的微博,结果就会弹出: 还有就是与父relative相对
  • 绝对定位 固定定位 关于浮动绝对定位相对定位的总结 定位不定位 position:static; 相对定位 position:relative; 激活属性top bottom left right 位移参考于原本的位置 特性 不会脱离文档流 对元素本身没有影响 如果...
  • 问题场景:form设置了绝对定位,form里面有个按钮,按钮注册了onclick事件,发现点击按钮没反应; 问题解决:在chrome中打开该网页,鼠标移到这个按钮上右键检查,发现form后面定义的html元素在该按钮的上面层,...
  • div后面需要点击的link或者标签放到绝对定位的div里面,然后将这个div的z-index设置得大于前一个绝对定位的div即可: z-index: 99; position: absolute;  
  • 元素绝对定位以后设置了高宽,a标签不能点击的原因: 1、元素内并无内容 2、背景是透明的,无任何背景图或者颜色 解决方法: 1、如果不是绝对定位元素的,可以用相对定位 2、给元素加透明的背景图 3、IE可以只用 ...
  • el-button,button, 点击事件失效 换其他布局方式
  • pointer-events:none;表示它将捕获不到任何点击,而只是让事件穿透到它的下面。 pointer-events:auto;表示鼠标不会穿透当前层,鼠标事件仍会监听这父元素,下面...2. 内层div设置绝对定位: position: absolute; z...
  • 问题是这样的,我在我的网页中引入了一个绝对定位覆盖整个网页的canvas,下方有跳转链接被画布挡住无法点击,所以写文记录一下这个问题。 解决方案: 在绝对定位的画布添加属性 pointer-events:none;这样就可以让...
  • pointer-events:none; 表示它将捕获不到任何点击,而只是让事件穿透到它的下面。 pointer-events:auto; 表示鼠标不会穿透当前层, 鼠标事件仍会监听这个父元素下面的子元素。...内层div设置绝对定位
  • 元素绝对定位以后设置了高宽,a标签不能点击的原因:1、元素内并无内容2、背景是透明的,无任何背景图或者颜色解决方法:1、如果不是绝对定位元素的,可以用相对定位2、给元素加透明的背景图3、IE可以只用 ...
  • 这个属性有什么用呢,一般不需要设置,但是当你给一个有定位的元素添加点击事件,想把它改成没有定位的话就用到了这个属性。比如: $('.header').on('click', function() { $(this).css('position', 'stat...
  • <!DOCTYPE ...> < ...lang= ...然后去点击想要调整位置的图片,这样就找到了该图片的属性位置 然后调节top,left等属性,等找到了自己想要的位置,记下此时的数字,回到代码中调节到这个位置即可。
  • 绝对定位:元素是相对离它最近的一个已定位的父级元素进行定位 不采用任何定位: .wxml文件 <view class="style_01"></view> .wxss文件 page{ background-color: #eee //便于区分,将整个页面设置为...
  • 问题:绝对定位的层,无背景,ie下点击空白处事件失效? 具体是什么原因不知道,目前只能解释为这是IE下的bug! 解决方案 使用position:relative而不是position:absolute; 添加背景色; 添加透明的背景...
  • 这样能够让鼠标事件穿透这个绝对定位层,使之能点击到后面的,然后再在这个绝对定位层里面需要接受事件的上面添加:pointer-events:auto; 这样做当元素比较多的时候比较烦。 我发现好一点的解
  • 本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。以及使用CSS的Left、Right、Top、Bottom属性(偏移属性)和Margin属性(外边距)对定位块级元素进行布局的方法。 CSS网页布局...
  • 今天遇到一个很奇怪的问题,在使用a标签模拟图片热点时用到绝对定位,在火狐、谷歌其它浏览器下没有问题,但ie却无法点击a连接。  经过搜索,才知道在 IE6,7 下,绝对定位的链接,如果它没有设置背景,并且它在...
  • CSS绝对定位中bottom参照点问题

    千次阅读 2016-04-06 21:58:50
    ...关于绝对定位元素的参照点,相信大家都知道,那就是离它最近的具有动态定位(absolute、relative、fixed)的祖先元素的左上角,如果它的祖先元素都没有动态定位,则把文档根元素即html元素
  • absolute绝对定位的非绝对定位应用肯定还有其他,只要记住无定位值的absolute元素就是个连实际宽度也没有的float浮动元素就可以了,然后利用这个特性,发挥您的创造力,实现更多更精彩的效果吧。 四、最后的小...
  • 在没有背景和图片填充的情况下,火狐和Chrome下不能直接点击绝对定位层下面的元素(比如链接),下面的链接被上面的绝对定位层挡住了。在IE里面是可以直接点击绝对定位层下面的链接。 对于这种问题需要用到一个css3...
  • z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较...注释:Z-index 仅能在定位元素上奏效(例如 position:absolute;)! 设置标签所在的盒子拥有更高的堆叠顺序 例如 我的账号 ...
  • 最近群里有人提了IE中a标签绝对定位设置高宽却无法点击的问题,其实这个是老问题了,最近在写一个JS效果的时候也遇到,今天顺便也做一个记录!元素绝对定位以后设置了高宽原因: 1、元素内并无内容 2、背景是透明...
  • 没有背景和图片填充的情况下,在火狐下不能直接点击绝对定位层下面的链接,下面的链接被上面的绝对定位层挡住了。在IE里面是可以直接点击绝对定位层下面的链接。 怎么解决这个问题那?主要的焦点问题就是解决...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 64,728
精华内容 25,891
关键字:

绝对定位点击事件