svg插入foreignObject無(wú)法響應(yīng)事件解決
更新時(shí)間：2023年10月17日 10:48:39 作者：frontoldman
這篇文章主要為大家介紹了svg插入foreignObject無(wú)法響應(yīng)事件解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
svg插入foreignObject無(wú)法響應(yīng)事件
svg中可以通過(guò)foreignObject嵌入html,展示更豐富的樣式。當(dāng)需要給這中間的html綁定事件的時(shí)候，不管是使用委托和直接查詢?cè)剡M(jìn)行綁定的時(shí)候都無(wú)法生效。右鍵檢查元素也檢查不到具體的元素，直接定位到最外部的svg。
解決pointer-events
經(jīng)排查是html中樣式pointer-events導(dǎo)致
/* Keyword values */ pointer-events: auto; pointer-events: none; pointer-events: visiblePainted; /* SVG only */ pointer-events: visibleFill; /* SVG only */ pointer-events: visibleStroke; /* SVG only */ pointer-events: visible; /* SVG only */ pointer-events: painted; /* SVG only */ pointer-events: fill; /* SVG only */ pointer-events: stroke; /* SVG only */ pointer-events: all; /* SVG only */ /* Global values */ pointer-events: inherit; pointer-events: initial; pointer-events: unset;
值none表示鼠標(biāo)事件“穿透”該元素并且指定該元素“下面”的任何東西。
改成stroke就可以響應(yīng)事件了
svgText = svgText .replace(/pointer-events:\s*none/g, 'pointer-events: all') .replace(/pointer-events/="none"/, 'pointer-events="stroke"')
以上就是svg插入foreignObject無(wú)法響應(yīng)事件解決的詳細(xì)內(nèi)容，更多關(guān)于svg插入foreignObject無(wú)響應(yīng)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Parcel?是現(xiàn)代前端開(kāi)發(fā)中不可或缺的工具之一,以其“零配置”的特性迅速贏得了開(kāi)發(fā)者的青睞,本文將通過(guò)幾個(gè)實(shí)例詳細(xì)介紹如何進(jìn)行?Parcel?的自定義配置,感興趣的小伙伴可以了解下2024-12-12
淺析前端JS腳本放在head與body對(duì)加載的影響以及優(yōu)化策略
JS放在不同位置確實(shí)有重要區(qū)別,這涉及到頁(yè)面加載性能、用戶體驗(yàn)和代碼執(zhí)行時(shí)機(jī)等多個(gè)方面,下面我們就來(lái)看看JS腳本放在head與body是如何影響加載的以及優(yōu)化策略2025-12-12
JS實(shí)現(xiàn)鏈表數(shù)據(jù)結(jié)構(gòu)的代碼詳解
很多前端的同學(xué)對(duì)數(shù)據(jù)結(jié)構(gòu)和算法這塊沒(méi)有太多的概念,很多l(xiāng)eetcode的題目看不懂,有時(shí)候可能看了題解也不知道是什么意思,這篇文章咱們來(lái)簡(jiǎn)單的談一談鏈表,文中給大家介紹了JS實(shí)現(xiàn)鏈表數(shù)據(jù)結(jié)構(gòu)的示例代碼,需要的朋友可以參考下2024-01-01
JS實(shí)現(xiàn)模態(tài)框拖拽動(dòng)態(tài)效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)模態(tài)框拖拽動(dòng)態(tài)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
JavaScript對(duì)象類型轉(zhuǎn)換的分類及步驟詳解
這篇文章主要為大家介紹了JavaScript對(duì)象類型轉(zhuǎn)換的分類及步驟詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
今天小編就為大家分享一篇layui獲取多選框中的值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要介紹了在HTTPS 項(xiàng)目中使用百度地圖 API，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
JavaScript筆記之import和require的區(qū)別與對(duì)比
在JavaScript中,require和import都用于模塊導(dǎo)入,這篇文章主要介紹了JavaScript筆記之import和require區(qū)別與對(duì)比的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2026-01-01
js位運(yùn)算在實(shí)際中使用的實(shí)例教程
我們可能很少在編程中用位運(yùn)算,如果沒(méi)深入學(xué)習(xí),可能也很難理解,下面這篇文章主要給大家介紹了關(guān)于js位運(yùn)算在實(shí)際中使用的相關(guān)資料,需要的朋友可以參考下2022-03-03
Bootstrap媒體對(duì)象學(xué)習(xí)使用
這篇文章主要為大家詳細(xì)介紹了Bootstrap媒體對(duì)象的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03