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)文章
javascript獲取ckeditor編輯器的值(實(shí)現(xiàn)代碼)
這篇文章主要介紹了javascript獲取ckeditor編輯器的值，用于表單驗(yàn)證。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
淺談JavaScript宏任務(wù)和微任務(wù)執(zhí)行順序
本文主要介紹了JavaScript宏任務(wù)和微任務(wù)執(zhí)行順序，結(jié)合實(shí)例代碼進(jìn)行了詳細(xì)的講解，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06
通過(guò)Javascript創(chuàng)建一個(gè)選擇文件的對(duì)話框代碼
通過(guò)Javascript創(chuàng)建一個(gè)選擇文件的對(duì)話框代碼，需要的朋友可以參考下2012-06-06
使用CoffeeScrip優(yōu)美方式編寫javascript代碼
CoffeeScript就是JavaScript，他進(jìn)行的是一對(duì)一的編譯，或者說(shuō)是翻譯，而且編譯成的JavaScript代碼可讀性很強(qiáng)。本文給大家介紹使用CoffeeScript優(yōu)美方式編寫javascript代碼，感興趣的朋友一起看看吧2015-10-10
nestjs返回給前端數(shù)據(jù)格式的封裝實(shí)現(xiàn)
這篇文章主要介紹了nestjs返回給前端數(shù)據(jù)格式的封裝實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
由JavaScript中call()方法引發(fā)的對(duì)面向?qū)ο罄^承機(jī)制call的思考
看到這里的call()方法，以前也看過(guò)手冊(cè)，說(shuō)是對(duì)象冒充的，用于繼承的。在jQuery源碼里有點(diǎn)亂，所以就把這部分提取出來(lái)，放在一個(gè)單獨(dú)文件中，來(lái)看看具體執(zhí)行。2011-09-09
這篇文章主要介紹了基于JS繪制2021的煙花效果，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-03
一步步教你用js簡(jiǎn)單實(shí)現(xiàn)新年倒計(jì)時(shí)
一轉(zhuǎn)眼已經(jīng)臘月了,相信小伙伴們一定想知道我們距離2023新年還有多少天,下面這篇文章主要給大家介紹了關(guān)于如何一步步教你用js簡(jiǎn)單實(shí)現(xiàn)新年倒計(jì)時(shí)的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了微信小程序框架的頁(yè)面布局代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
基于打包工具Webpack進(jìn)行項(xiàng)目開(kāi)發(fā)實(shí)例
這篇文章主要介紹了基于打包工具Webpack進(jìn)行項(xiàng)目開(kāi)發(fā)實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05