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

Posted gocircle

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了embed标签 阻止点击事件 让父元素处理点击事件相关的知识,希望对你有一定的参考价值。

由于规定页面显示的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

 

以上是关于embed标签 阻止点击事件 让父元素处理点击事件的主要内容,如果未能解决你的问题,请参考以下文章

js在父元素上添加点击事件,怎么阻止子元素继承父元素的点击事件

为啥阻止a标签的默认事件

如何撑开父元素,让父元素div自动适应高度的问题

阻止事件冒泡

处理事件冒泡

js在父元素上添加点击事件,怎么阻止子元素继承父元素的点击事件?