个人中心
gpt4 book ai didi

javascript - 为什么我的单击功能在移动设备上的 SVG 内部不起作用，但在桌面上却起作用？

转载 作者：行者123 更新时间：2023-12-01 01:26:44 25 4
gpt4 key购买 nike

此代码段中显示了 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”的 span 中的值。

这一切在桌面上都能完美运行，但在 iPhone 设备和 Android 上，它不会引入这些值。 h2 和 span 没有改变。

最佳答案

问题来自 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>

我相信下一个 fragment 对于重用来说更加清晰:

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>

关于javascript - 为什么我的单击功能在移动设备上的 SVG 内部不起作用，但在桌面上却起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53702712/

25 4 0
文章推荐： javascript - 如何在 div 上高效地声明事件
文章推荐： javascript - 存储用户输入并显示
文章推荐： javascript - 如何使用javascript或jquery获取td值的字体颜色或文本颜色
文章推荐： windows-phone-7 - Windows Phone 应用程序中的合成根在哪里？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com