embed标签 阻止点击事件 让父元素处理点击事件
由于规定页面显示的PDF文件要有固定大小,使得页面风格统一
最开始发现了CSS样式pointer-events
写出如下代码,在360急速浏览器急速模式中访问可在点击PDF控件时可跳转页面
<ahref="pdf文件.pdf"title="pdf文件.pdf"style="width:200px;display: inline-block; height: 200px;"target="_blank"> <embedsrc='pdf文件.pdf'class="kv-preview-data file-preview-pdf file-zoom-detail"type="application/pdf"style="width:200px;height:200px;pointer-events: none;"> </a>
但
在最新谷歌浏览器中访问却一直不能执行A标签链接跳转
在给PDF控件加了遮罩层后才解决
<---谷歌浏览器 版本 68.0.3440.106--->
<ahref="pdf文件.pdf"title="pdf文件.pdf"style="width:200px;display: inline-block; height: 200px;"target="_blank"> <divstyle="width: 200px;height: 200px;position: absolute;z-index: 9999;background: rgba(0, 0, 0, 0.14);"></div> <embedsrc='pdf文件.pdf'class="kv-preview-data file-preview-pdf file-zoom-detail"type="application/pdf"style="width:200px;height:200px;pointer-events: none;"> </a> <---360急速浏览器 急速模式---> <ahref="pdf文件.pdf"title="pdf文件.pdf"style="width:200px;display: inline-block; height: 200px;"target="_blank"> <embedsrc='pdf文件.pdf'class="kv-preview-data file-preview-pdf file-zoom-detail"type="application/pdf"style="width:200px;height:200px;pointer-events: none;"> </a>
CSS样式pointer-events详细介绍
pointer-events:auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all
默认值:auto
适用于:所有元素
继承性:有
动画性:否
计算值:指定值
取值:
- auto:
-
与pointer-events属性未指定时的表现效果相同。在svg内容上与
visiblepainted
值相同 - none:
- 元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。
- 其他值只能应用在SVG上。
说明:
- 使用
pointer-events
来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。如果元素后代明确指定了pointer-events
属性并允许其成为鼠标事件的目标,那么指向该元素的任何事件在事件传播过程中都将通过父元素,并以适当的方式触发其上的事件侦听器。当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获(将会穿过父元素而指向位于其下面的元素)。 - 对应的脚本特性为pointerEvents。
转载于:https://www.cnblogs.com/GoCircle/p/9578936.html
embed标签 阻止点击事件 让父元素处理点击事件相关推荐
- html 点击子元素,html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡...
如果子元素和父元素都有点击事件,会出现点击事件冒泡的情况. 1.如何避免冒泡: html: 你好, 战无不胜 [注销] js: 方法1: UserLogout.οnclick=function (e) ...
- 父元素a标签的href默认行为以及子元素绑定的click事件的响应之间存在影响
原文地址 背景 开发过程中遇到问题,简单写个demo 运行环境为Chrome 68 描述一下这个问题,当a标签内部存在嵌套时, 父元素a标签的href默认行为以及子元素绑定的click事件的响应之间存 ...
- html,js 中如何屏蔽div子元素点击事件会触发父元素的点击事件($event.cancelBubble=true;)
1. 第一种方法:html中屏蔽父元素的点击事件($event.cancelBubble=true;) <div (click)="select($event)"> & ...
- 给父元素添加点击事件时,获取到的 event.target 为子元素(point-events: none 的妙用)
目录 场景 分析 解决 场景 使用 ion-select 组件时,点击下拉图标 点击事件的 event.target,不是图标本身的 DOM,而是图标子元素的 DOM 这会导致 popover 无法计 ...
- jquery父元素和子元素点击事件传递问题_不可把父元素的事件传递给子元素_事件无限循环传递...
前述:jquery中: 当一个元素的点击事件被触发时,会自动将该事件向父级元素逐级专递. 但是实际场景当中,我们可能会遇到需要在父级元素中定义点击事件,来触发特定子元素的点击事件,我就遇到了这么一个问 ...
- css中为伪元素增加点击事件和hover
鼠标悬停在父元素上面时为伪类元素增加样式 <!-- html结构 --> <div class="father"></div><style ...
- jQuery绑定点击事件和改变事件的几种方式以及多个元素绑定多个事件
jQuery绑定点击事件和改变事件的几种方式以及多个元素绑定多个事件 简单的html页面: <!DOCTYPE html> <html lang="en"> ...
- 事件(一)绑定与解除事件
一.如何绑定事件处理函数 1.DOM.onxxx = function (event){} div.onclick = function(){} 兼容性很好 但是一个元素的同一个事件只能绑定一个处理程 ...
- 神策数据上线“点击分析”,深度感知用户点击行为
下雨天,雨滴落在湖面形成涟漪,雨滴落下位置.大小.速度不同,且涟漪之间相互影响,让湖面呈现不同的形状--这如同访客点击网站页面,页面上元素(如按钮.图片等)的位置.元素之间的交叉影响都会造成不同的访问 ...
最新文章
- leveldb demo
- html dvi如何设置置顶不能空白位置,[html]关于html标签的一些总结
- Arrays.sort()源码分析
- 直播 | WWW 2021论文解读:生成式板块推荐的变分控制和评估
- BATJ面试必会|Jvm 虚拟机篇
- CocoaPods did not set the base configuration of your project 问题解决方案
- Docker的应用场景
- 限制UI只能在屏幕内移动(放大或缩小屏幕同样适用)
- python 括号 垃圾_Python 为什么抛弃累赘的花括号,使用缩进来划分代码块?
- Vc6.0打开该文件坠毁
- php网站iis7.5 session,IIS 7.5 asp Session超时时间设置方法
- 有谁知道iphone XR的“R”到底是什么意思?答案可能会让你们无奈
- pug在vue中的序列写法
- 反激式开关电源输出电压的PID控制之MATLAB仿真
- TLE两行数与轨道六根数转换
- Matlab/simulink、Saber及PSpice学习比较
- java dispo lock_Java Row.getAs方法代码示例
- android 群英传代码,Android控件架构(Android群英传)
- 中关村发布:大数据企业分布图等3张图
- !外贸邮件处理经验谈