解决z-index上层元素遮挡下层元素点击事件问题

by:授客 QQ1033553122

开发环境

Win 10

element-ui  "2.8.2"

Vue 2.9.6

需求描述

如下,有以下界面,其中右侧边时一个ElementUI Dialog模态对话框,希望在对话框上执行点击操作时,不会点击到被对话框遮挡的页面的按钮,同时,也希望可以点击对话框区域外的其它页面元素

html元素结构如下

解决方案

为被遮挡元素上层使用z-index属性的元素添加以下样式:

pointer-events: none;

这样点击事件就能穿透上层元素,可点击到被遮挡元素,但是此时,上层元素无法响应点击事件

然后为被遮挡元素添加以下样式,让上层元素可以响应点击事件(仅让被遮挡元素自身可以响应点击事件):

pointer-events: auto;

代码实现

<template>

<!-- 用例详情组件 -->

<div class="case-dialog-div">

<el-dialog

ref="caseDialog"

:title="caseDialogTitle"

:visible="caseDialogVisible"

:fullscreen="fullscreen"

:modal="false"

:close-on-click-modal="false"

:before-close="beforeClose"

custom-class="case-dialog-class"

@close="onCloseDialog"

>

...略

</el-dialog>

</div>

</template>

<style lang="scss">

// 修改dialog body样式//该样式不能放置.case-dialog-div下,否则 全屏 功能不起作用

.case-dialog-class {

position: fixed;

pointer-events: auto; // dialog本身区域不让“穿透点击”

display: block;

height: 100%;

width: 50%; // width: 959px;

right: 0px;

margin-top: 0px !important;

padding: 10px !important;

overflow: auto;

}

.case-dialog-div {

.el-dialog__wrapper {

pointer-events: none; // 可点击dialog区域外的html元素

}

...略

}

</style>

CSS 解决z-index上层元素遮挡下层元素点击事件问题的更多相关文章

  1. 赋予option元素点击事件后,点击select时却触发了option事件。如何解决?

    将select的优先级提到option之前就可以了. 方法:为select元素添加position:relative: <select class="adt" name=&q ...

  2. JS点击子元素不触发父元素点击事件(js阻止冒泡)

    js阻止冒泡 <html> <title></title> <head> <meta charset="utf-8"> ...

  3. a元素变成块状元素点击之后删除出现背景

    a { text-decoration: none; background: none; -webkit-tap-highlight-color: transparent; } a:hover { - ...

  4. jquery父元素和子元素点击事件传递问题_不可把父元素的事件传递给子元素_事件无限循环传递

    前述:jquery中: 当一个元素的点击事件被触发时,会自动将该事件向父级元素逐级专递. 但是实际场景当中,我们可能会遇到需要在父级元素中定义点击事件,来触发特定子元素的点击事件,我就遇到了这么一个问 ...

  5. Apple 移动设备绑定动态生成元素点击事件$(document).on('click',element,callback)失效解决方法

    今天在工作中刚接触到了微信社区相关的开发工作,测试的时候发现,动态生成元素的点击事件在andriod设备上可以触发,而在apple移动设备上却无法触发.好奇的我赶紧百度了下,很快就在stackover ...

  6. winform自定义控件中其他遮挡控件点击事件

    自定义控件在其他窗口调用时,里面的lable阻挡了控件的点击事件 解决方法 自定义控件中lable的 点击事件 private void Lable1_Click(object sender, Eve ...

  7. F12找到页面某一元素所绑定的点击事件

    比如我要查看银行账号这个标签所绑定的事件. 操作过程中使用的是谷歌浏览器 第一步:在该元素上右键→检查 第二步:点击Event Listeners 这样就能看到该元素绑定的所有事件了 第三步:展开cl ...

  8. html/css解决inline-block内联元素间隙的多种方法总汇

    序 display有几种属性:inline是内联对象,比如<a/> . <span/>标签等,可以“堆在一起”显示,宽高由内容决定,不能设置:block是块对象,比如<d ...

  9. js或css指定元素点击时内容不可被选中

    一.css3中可以使用"user-select"属性: body{ -webkit-user-select:none;/*谷歌 /Chrome*/ -moz-user-select ...

随机推荐

  1. vue当文字很多的时候实现...代替

    vue当文字很多的时候实现...代替只需加三行代码 overflow: hiddenwhite-space: nowraptext-overflow: ellipsis

  2. Java方法之定义形式及可变参数

    目录 Java方法之定义形式及可变参数 方法调用 使用static修饰的方法 没有static修饰的方法 方法的定义格式 无参无返 无参有返 有参无返 有参有返 形参个数可变的方法 采用数组形参来定义 ...

  3. Servlet+Ajax实现搜索框智能提示

    简介:搜索框相信大家都不陌生,几乎每天都会在各类网站进行着搜索.有没有注意到,很多的搜索功能,当输入内容时,下面会出现提示.这类提示就叫做搜索框的智能提示,本门课程就为大家介绍如何使用Servlet和 ...

  4. JAVA合并多个word文档根据文章标题生成目录

    此产品版本是免费版的,我也是在用免费,除了只能单次识别25张一下的word和生成pdf有限制,其他的功能都和正式版差不多. 如果你几十个文档,每个文档几页,输出出来超过25页,那没关系,依然可以使用. ...

  5. MYSQL删除

    1.使用360卸载,并强力删除相关东东 2.清理注册表: A.HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Services\Eventlog\Application ...

  6. CCNA 之 六 路由协议 二 EIGRP

    EIGRP(Enhanced IGRP) 增强型内部网关路由协议 注意:这是cisco私有协议:也就是说,该协议只能运行在思科的设备上,如果有其他的厂家的设备,则不能保证能运行此协议: EIGRP的特 ...

  7. 从壹开始 [ Design Pattern ] 之三 ║ 工厂模式 与 小故事

    编者按: 定义一个用于创建对象的接口,让子类决定实例化哪一个类.工厂方法使得一个类的实例化延迟到子类. 工厂模式,是迄今为止,使用最多,最广泛的设计模式之一,它的身影几乎出现在每一个框架和个人代码之中 ...

  8. 在jsp页面中设置中序号

    首先要使用<c>标签的话需要先引入下面这句话: <%@ taglib prefix="c" uri="http://Java.sun.com/jsp/j ...

  9. Jest测试框架入门

    近年来,随着前端工程化的发展,前端发生了翻天覆地的变化.jQuery已经慢慢淡出了我们的视野,React.Vue和anglur三驾马车急速驶来.从此,前端进入了数据驱动的时代,也有了清晰的模块化开发的 ...

  10. PHP常用字符串函数总结

    PHP语言中的字符串函数也是一个比较易懂的知识.今天我们就为大家总结了将近12种PHP字符串函数,希望对又需要的朋友有所帮助,增加读者朋友的PHP知识库. 1.查找字符位置函数 strpos($str ...