首页 文章

为什么我的点击功能在移动设备上的这个SVG内部不起作用,但它在桌面上有效?

提问于
浏览 1401
0

我在这个片段中显示了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”和带有id“content”的span来更改h2中的值 .

这一切都在桌面上完美运行,但在iPhone设备和Android上,它并没有提升 Value . h2和 Span 没有变化 .

1 回答

  • 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>
    

    我相信下一个片段更易于重用:

    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>
    

相关问题