embed标签 阻止点击事件 让父元素处理点击事件

Posted 2021-01-03 gocircle

由于规定页面显示的PDF文件要有固定大小，使得页面风格统一

最开始发现了CSS样式pointer-events

写出如下代码，在360急速浏览器急速模式中访问可在点击PDF控件时可跳转页面

<a href="pdf文件.pdf" title="pdf文件.pdf" style="width:200px;display: inline-block; height: 200px;" target="_blank">
<embed src=‘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--->

<a href="pdf文件.pdf" title="pdf文件.pdf" style="width:200px;display: inline-block; height: 200px;" target="_blank">
<div style="width: 200px;height: 200px;position: absolute;z-index: 9999;background: rgba(0, 0, 0, 0.14);"></div>
<embed src=‘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急速浏览器 急速模式--->
<a href="pdf文件.pdf" title="pdf文件.pdf" style="width:200px;display: inline-block; height: 200px;" target="_blank">
<embed src=‘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上。

说明：

设置或检索在何时成为属性事件的target。

• 使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件侦听器。当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获（将会穿过父元素而指向位于其下面的元素）。
• 对应的脚本特性为pointerEvents。