为啥我的点击功能在移动设备上的这个 SVG 内不起作用，但在桌面上却起作用？

Posted 2023-05-07

技术标签:

【中文标题】为啥我的点击功能在移动设备上的这个 SVG 内不起作用，但在桌面上却起作用？【英文标题】：Why does my click function not work inside of this SVG on mobile devices but it does on desktop?为什么我的点击功能在移动设备上的这个 SVG 内不起作用，但在桌面上却起作用？ 【发布时间】：2019-05-11 04:17:19 【问题描述】：

我在这个 sn-p 中显示了 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"  />
        <rect x="284.3" y="208.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -109.2435 282.0108)" class="st0"  />
        <rect x="135.2" y="174.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -65.8929 192.5836)" class="st0"  />
        <rect x="224.5" y="185.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -47.3859 258.8714)" class="st0"  />
        <rect x="108.8" y="130.7" class="st0"  />
        <rect x="244.3" y="230.8" class="st0"  />
        <rect x="242.4" y="36.1" class="st0"  />
        <g>
          <defs>
            <rect id="SVGID_1_" x="2.9" y="26.3"  />
          </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，它应该会改变一个h2中的值，id为“header”，span的id为“content”。

这一切都可以在桌面上完美运行，但在 iPhone 设备和 android 上，它并没有引入价值。 h2 和 span 没有变化。

【问题讨论】：

这里没有 jQuery。您可以尝试使用 Javascript（例如 addEventListener）而不是 HTML 属性正确附加处理程序删除了 jQuery，很抱歉我原来有一些 jQuery 但删除了它，因为它与这个问题无关。我在 iPhone 上测试过，但我的客户告诉我她的 Android 设备也没有显示它们...上面 sn-p 中的链接没有显示在我的移动设备上，它默认为sn-p 框返回 [code] 框是的，它在 codepen 中也适用于我。我认为问题在于我有 SVG 中的链接。我最初忽略了这一点，因为我认为它不相关，并且我试图简化帖子。我在这里设置了一个codepen：codepen.io/maniac123/pen/PXovZq这是我拥有的完整代码，它在移动设备上不起作用。您好，我已经在 Android 上使用 Chrome 和 Firefox 测试了codepen，并且都可以正常工作。但是在桌面上的 Firefox 中它不起作用。如果它适用于您的手机，请查看我的答案。 【参考方案1】：

问题来自javascript:someFunction SVG 不是问题。javascript:someFunction 似乎不适用于所有浏览器。这意味着不仅移动设备受到影响。请看：a href=javascript:function() in firefox not working. 这里还有一个有趣的讨论：JavaScript function in href vs. onclick.

要回答您的问题，我将使用如下所示的 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>

相信下一个sn-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"  />
        <rect x="284.3" y="208.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -109.2435 282.0108)" class="st0"  />
        <rect x="135.2" y="174.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -65.8929 192.5836)" class="st0"  />
        <rect x="224.5" y="185.1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -47.3859 258.8714)" class="st0"  />
        <rect x="108.8" y="130.7" class="st0"  />
        <rect x="244.3" y="230.8" class="st0"  />
        <rect x="242.4" y="36.1" class="st0"  />
        <g>
          <defs>
            <rect id="SVGID_1_" x="2.9" y="26.3"  />
          </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>

【讨论】：

这可能是正确的，但您需要使用 OPs 示例代码，因为他的问题专门针对 SVG，并且此答案中没有 SVG @Liam 我添加了 SVG sn-p 谢谢，改成 onclick 确实解决了这个问题。

以上是关于为啥我的点击功能在移动设备上的这个 SVG 内不起作用，但在桌面上却起作用？的主要内容，如果未能解决你的问题，请参考以下文章

为啥问号在 %% 内不起作用？ [复制]

为啥我的输入在移动设备上不起作用？

为啥这个 SVG 在 EPUB 文件中不起作用

为啥 style 属性中定义的这个内联 SVG 过滤器不起作用？

移动设备上的Youtube自动播放功能不起作用，但在浏览器中可行

为啥这个嵌套的 SVG 在 Firefox 中不起作用？