embed標簽 阻止點擊事件 讓父元素處理點擊事件
阿新 • • 發佈：2018-09-03
rev 計算 pointer rgb target 特性 inter 版本 css樣式
由於規定頁面顯示的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標簽 阻止點擊事件 讓父元素處理點擊事件