为什么单击功能在移动设备上无法在此SVG内运行，但在台式机上却可以运行？

Question

我在此代码段中显示了2个简单的JS函数：

 function ReplaceHeader(id,content) { var container = document.getElementById(id); container.innerHTML = content; } function ReplaceContent(id,content) { var container = document.getElementById(id); container.innerHTML = content; } 

 .st0 { fill: #C6C8AB; } .st1 { clip-path: url("#SVGID_2_"); fill: #C6C8AB; } .st2 { fill: #5362FF; } .st3 { fill: #2A4D5C; } .st4 { font-family: 'HalisR-Bold'; } .st5 { font-size: 10px; } .st6 { enable-background: new; } .st7 { fill: none; stroke: #C6C8AB; stroke-width: 3; } .st8 { clip-path: url("#SVGID_4_"); fill: none; stroke: #C6C8AB; stroke-width: 3; stroke-miterlimit: 10; } path.active { stroke: #5362FF; stroke-width: 8px; paint-order: stroke; stroke-linejoin: round; } text.active tspan { fill: #5362FF !important; } .gd-globe a:hover > path { stroke: #5362FF; stroke-width: 8px; paint-order: stroke; stroke-linejoin: round; } .gd-globe a:hover > text tspan, .gd-globe a:hover > text { fill: #5362FF !important; } 

 <div class="gd-globe"> <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 485.1 359.6" style="enable-background:new 0 0 485.1 359.6;" xml:space="preserve"> <!-- Click replace content JS --> <rect x="198.9" y="23.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -3.1406 167.3344)" class="st0" width="3" height="128.6"/> <rect x="284.3" y="208.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -109.2435 282.0108)" class="st0" width="3" height="128.6"/> <rect x="135.2" y="174.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -65.8929 192.5836)" class="st0" width="128.6" height="3"/> <rect x="224.5" y="185.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -47.3859 258.8714)" class="st0" width="128.6" height="3"/> <rect x="108.8" y="130.7" class="st0" width="132.5" height="3"/> <rect x="244.3" y="230.8" class="st0" width="135.3" height="3"/> <rect x="242.4" y="36.1" class="st0" width="3" height="290.2"/> <g> <defs> <rect id="SVGID_1_" x="2.9" y="26.3" width="474.9" height="312.5"/> </defs> <clipPath id="SVGID_2_"> <use xlink:href="#SVGID_1_" style="overflow:visible;"/> </clipPath> <path class="st1" d="M240.3,338.8c-69.8,0-129.8-16.1-173.6-46.6C25.5,263.5,2.9,224.6,2.9,182.6c0-42.9,21.3-81.8,60-109.6 c42.5-30.5,103.8-46.6,177.4-46.6c70.9,0,131.4,16.1,174.8,46.6c40.4,28.4,62.7,67.3,62.7,109.6c0,41.8-23.1,80.7-64.9,109.6 C369.3,322.3,308,338.8,240.3,338.8z M240.3,29.3c-72.9,0-133.7,15.9-175.6,46.1C26.8,102.6,5.9,140.7,5.9,182.6 c0,41,22.2,79.1,62.5,107.2c43.3,30.2,102.8,46.1,171.9,46.1c67.1,0,127.7-16.4,170.8-46.1c41-28.3,63.6-66.4,63.6-107.2 c0-41.3-21.8-79.3-61.4-107.2C370.5,45.2,310.6,29.3,240.3,29.3z"/> </g> <path class="st2" d="M390.2,231.4c-0.1-58.8-47.7-106.5-106.5-106.5H244h-0.1h-0.5c-0.1,0-0.3,0-0.4,0.1c-3.1,0.5-5.5,3-5.8,6.2 c0,0.1-0.1,95.2-0.1,95.2H204c-51.5,0-93.2-41.7-93.2-93.2S152.5,40,204,40h40c3.7,0.1,6.9-2.8,7-6.5s-2.8-6.9-6.5-7 c-0.2,0-0.3,0-0.5,0h-39.9c-59,0-106.7,47.8-106.7,106.8c0,58.9,47.8,106.7,106.7,106.7H244c3.7,0,6.8-3,6.8-6.8v-94.7h33 c49.5,0,90.4,38.8,92.9,88.3c0.1,1.6,0.1,3.2,0.1,4.8c0,3.2-0.2,6.3-0.5,9.5c-4.7,47.5-44.8,83.7-92.6,83.5H244 c-3.7,0-6.7,3-6.8,6.7c0,2.9,1.9,5.5,4.7,6.5l0,0c0.6,0.2,1.3,0.3,2,0.3h39.8C342.6,337.7,390.2,290.1,390.2,231.4"/> <!-- Social Entrepreneurs --> <a href="javascript:ReplaceHeader('header','Social Entrepreneurs'); javascript:ReplaceContent('content','some content'); "> <path class="st3" d="M331.4,150.6c3.8,0,6.8-3.1,6.8-6.8s-3.1-6.8-6.8-6.8c-3.8,0-6.8,3.1-6.8,6.8l0,0 C324.6,147.5,327.7,150.6,331.4,150.6"/> <text transform="matrix(1 0 0 1 355.2294 118.67)" class="st6"> <tspan x="0" y="0" class="st3 st4 st5">SOCIAL</tspan> <tspan x="-24.8" y="12" class="st3 st4 st5">ENTREPRENEURS</tspan> </text> </a> </svg> </div> <h5 id="header" class="h2" style="font-size:18px; text-align:left;">header</h2> <span class="copy" id="content">title</span> 

以及一些带有内联函数编码的href。 href围绕SVG。 我用所有代码创建了一个Codepen：

https://codepen.io/maniac123/pen/PXovZq

单击href时，应该更改ID为“ header”的h2中的值和ID为“ content”的跨度中的值。

所有这些都可以在台式机上完美运行，但是在iPhone设备和android上，它并没有获取任何价值。 h2和跨度没有变化。

Answer 1

问题来自javascript:someFunction SVG不是问题。
似乎javascript:someFunction并非在所有浏览器中都起作用。
这意味着不仅移动设备正在遭受痛苦。
请查看： firefox中的a href = javascript：function（）不起作用 。
这也是一个有趣的讨论： href与onclick中的JavaScript函数 。

要回答您的问题，我将使用如下所示的onlick：

 // Made the functions to 1 function because the content was the same function ReplaceContent(id,content) { var container = document.getElementById(id); container.innerHTML = content; } 

 <a href='#' onclick=' ReplaceContent("header", "New header") ReplaceContent("text", "More Lorem ipsum...") ' >test</a> <h2 id='header'>Header</h2> <p id='text'> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 

我相信下一个代码段更易于重用：

 function LinkReplace() { // Now you do not need to fiddle in the HTML for JS functions ReplaceContent("header", "New header") ReplaceContent("text", "More Lorem ipsum...") } function ReplaceContent(id,content) { var container = document.getElementById(id); container.innerHTML = content; } 

 <a href='#' onclick='LinkReplace()' >test</a> <h2 id='header'>Header</h2> <p id='text'> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> 

使用SVG：

 function LinkReplace() { // Now you do not need to fiddle in the HTML for JS functions ReplaceContent("header", "New header") ReplaceContent("text", "More Lorem ipsum...") } function ReplaceContent(id,content) { var container = document.getElementById(id); container.innerHTML = content; } 

 .st0 { fill: #C6C8AB; } .st1 { clip-path: url("#SVGID_2_"); fill: #C6C8AB; } .st2 { fill: #5362FF; } .st3 { fill: #2A4D5C; } .st4 { font-family: 'HalisR-Bold'; } .st5 { font-size: 10px; } .st6 { enable-background: new; } .st7 { fill: none; stroke: #C6C8AB; stroke-width: 3; } .st8 { clip-path: url("#SVGID_4_"); fill: none; stroke: #C6C8AB; stroke-width: 3; stroke-miterlimit: 10; } path.active { stroke: #5362FF; stroke-width: 8px; paint-order: stroke; stroke-linejoin: round; } text.active tspan { fill: #5362FF !important; } .gd-globe a:hover > path { stroke: #5362FF; stroke-width: 8px; paint-order: stroke; stroke-linejoin: round; } .gd-globe a:hover > text tspan, .gd-globe a:hover > text { fill: #5362FF !important; } 

 <div class="gd-globe"> <svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 485.1 359.6" style="enable-background:new 0 0 485.1 359.6;" xml:space="preserve"> <rect x="198.9" y="23.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -3.1406 167.3344)" class="st0" width="3" height="128.6"/> <rect x="284.3" y="208.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -109.2435 282.0108)" class="st0" width="3" height="128.6"/> <rect x="135.2" y="174.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -65.8929 192.5836)" class="st0" width="128.6" height="3"/> <rect x="224.5" y="185.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -47.3859 258.8714)" class="st0" width="128.6" height="3"/> <rect x="108.8" y="130.7" class="st0" width="132.5" height="3"/> <rect x="244.3" y="230.8" class="st0" width="135.3" height="3"/> <rect x="242.4" y="36.1" class="st0" width="3" height="290.2"/> <g> <defs> <rect id="SVGID_1_" x="2.9" y="26.3" width="474.9" height="312.5"/> </defs> <clipPath id="SVGID_2_"> <use xlink:href="#SVGID_1_" style="overflow:visible;"/> </clipPath> <path class="st1" d="M240.3,338.8c-69.8,0-129.8-16.1-173.6-46.6C25.5,263.5,2.9,224.6,2.9,182.6c0-42.9,21.3-81.8,60-109.6 c42.5-30.5,103.8-46.6,177.4-46.6c70.9,0,131.4,16.1,174.8,46.6c40.4,28.4,62.7,67.3,62.7,109.6c0,41.8-23.1,80.7-64.9,109.6 C369.3,322.3,308,338.8,240.3,338.8z M240.3,29.3c-72.9,0-133.7,15.9-175.6,46.1C26.8,102.6,5.9,140.7,5.9,182.6 c0,41,22.2,79.1,62.5,107.2c43.3,30.2,102.8,46.1,171.9,46.1c67.1,0,127.7-16.4,170.8-46.1c41-28.3,63.6-66.4,63.6-107.2 c0-41.3-21.8-79.3-61.4-107.2C370.5,45.2,310.6,29.3,240.3,29.3z"/> </g> <path class="st2" d="M390.2,231.4c-0.1-58.8-47.7-106.5-106.5-106.5H244h-0.1h-0.5c-0.1,0-0.3,0-0.4,0.1c-3.1,0.5-5.5,3-5.8,6.2 c0,0.1-0.1,95.2-0.1,95.2H204c-51.5,0-93.2-41.7-93.2-93.2S152.5,40,204,40h40c3.7,0.1,6.9-2.8,7-6.5s-2.8-6.9-6.5-7 c-0.2,0-0.3,0-0.5,0h-39.9c-59,0-106.7,47.8-106.7,106.8c0,58.9,47.8,106.7,106.7,106.7H244c3.7,0,6.8-3,6.8-6.8v-94.7h33 c49.5,0,90.4,38.8,92.9,88.3c0.1,1.6,0.1,3.2,0.1,4.8c0,3.2-0.2,6.3-0.5,9.5c-4.7,47.5-44.8,83.7-92.6,83.5H244 c-3.7,0-6.7,3-6.8,6.7c0,2.9,1.9,5.5,4.7,6.5l0,0c0.6,0.2,1.3,0.3,2,0.3h39.8C342.6,337.7,390.2,290.1,390.2,231.4"/> <!-- Social Entrepreneurs --> <a href='#' onclick='LinkReplace()'> <path class="st3" d="M331.4,150.6c3.8,0,6.8-3.1,6.8-6.8s-3.1-6.8-6.8-6.8c-3.8,0-6.8,3.1-6.8,6.8l0,0 C324.6,147.5,327.7,150.6,331.4,150.6"/> <text transform="matrix(1 0 0 1 355.2294 118.67)" class="st6"> <tspan x="0" y="0" class="st3 st4 st5">SOCIAL</tspan> <tspan x="-24.8" y="12" class="st3 st4 st5">ENTREPRENEURS</tspan> </text> </a> </svg> </div> <h2 id='header'>Header</h2> <p id='text'> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>