如何在锚标签中使用 onclick 和 href 并仅使 onclick 工作。href 仅用于谷歌抓取

Posted 2023-03-05

【中文标题】如何在锚标签中使用 onclick 和 href 并仅使 onclick 工作。href 仅用于谷歌抓取

【英文标题】：How to use onclcik and href in anchor tag and make only onclick work.href is only for google crawling

【发布时间】：2016-10-16 01:36:37

【问题描述】：

在我的网站中，当我点击图片时，它会使用 onclcik openpopup（用户定义函数）打开新页面

我的问题是 google 不会索引 onclcik 网址，它只会索引 href 网址。

所以我想在锚标签中使用 onclcik 和 href 并只使 onclick 工作。href 仅用于 Google 抓取目的只有我的代码如下

var imgurl = "http:"+lcurl+touch_id+".jpg";
                 var data = "<div id=charm_"+touch_id+" data-charmid="+touch_id+" data-vis="+bgid+" data-vid="+seid+" data-vtitle="+vtitle_url+" data-title="+title_url+" style='float:left;' class='mdl-cell mdl-cell--4-col charm-wrapper'>\n\
                <div class='mdl-card-wrapper charm-inner'>\n\
                  <div class='demo-card-wide mdl-card mdl-shadow--8dp'>\n\
                        <div class='mdl-card__media'>\n\
                        "+locicon+" \n\
                      <a href="popupurl" id='myAnchor' > \n\
                      <div style='position:relative;'>\n\
                      <div style='position:absolute;z-index:9;right:0px;bottom:0px;'><img width=32px src="+cf_assets+"img/hanger.png></div>\n\
                       <div id=imagearea_"+touch_id+" title='"+title+"' class='imagearea loading'>\n\
                      </div></div></a>\n\
                    </div>\n\
                          <div class='mdl-card__title'>\n\
                    <div class='right-charm'>\n\
                     <div class='social-share'>\n\
                     "+copycontent+"\n\
                     "+watsapp+"\n\
                          <a onclick=sharetofb('"+ct_domain+socialshare_url+"'); title='Facebook' id=fb"+touch_id+" \n\
                  class='fb_share'></a>\n\
                <a onclick=sharetotwitter('"+ct_domain+socialshare_url+"'); title='Twitter' id=tw"+touch_id+" class='tw_share'> </a>\n\
                          </div>\n\
                          </div>\n\
                          <div class='icharm'>\n\
                      <h2 class='mdl-card__title-text'>"+subtitle+"</h2>\n\
                      <div class='mdl-card__subtitle-text'>"+title+"</div>\n\
                      <div id=vid_"+touch_id+" class='mdl-card__subtitle-videoname'>"+videoname+"</div>\n\
                       </div>\n\
                        </div>\n\
                      </div>\n\
                  </div>\n\
                </div>";
      $('#main-home-page-inner').add(html(data));


          callcloudinary(imgurl,title,touch_id);
          callmasonry();

      if(i == setarr.length-1)


         localStorage.touchids=touchid_arr.join(",");
        localStorage.searchresults=gcharmarr.join(",");
     
     // document.getElementById("main-home-page-inner").innerHTML += html;

    

    /* document.getElementById("fb"+touch_id).setAttribute("onclick","sharetofb('"+title+"','"+text+"','"+ct_domain+socialshare_url+"','"+social_domain+lcurl+touch_id+".jpg')");*/
  
   //addEventListener('click', function (ev) 
       //ev.preventDefault();
       // alert(ev.target.getAttribute("data-charmid"));
     // openpopup(ev.target.getAttribute("data-url"));
     // sendpym(ev.target.getAttribute("data-title"));
   // );
            $('myAnchor').on('click',function(ev) 
 ev.preventDefault();
 openpopup(ev.target.getAttribute("popupurl"));
      sendpym(ev.target.getAttribute("data-charmid"));

);

           )
           .error(function(status, statusText, responseText) 
                //console.log(statusText);
                //console.log(responseText);
           );

【问题讨论】：

欢迎来到 Stack Overflow :-) 请不要在 cmets 中发布代码，请使用 edit 函数将其添加到问题中。查看how to ask 和How to create a Minimal, Complete, and Verifiable example。这将有助于获得有用的答案。

感谢您的指导

@sudankanakavel 发布开发者控制台日志

【参考方案1】：

修复您的代码。将元素放在引号中。正确使用引号。

    var imgurl = "http:"+lcurl+touch_id+".jpg";
    var data = "<div id='charm_"+touch_id+"' data-charmid='"+touch_id+"' data-vis='"+bgid+"' data-vid='"+seid+"' data-vtitle='"+vtitle_url+"' data-title='"+title_url+"' style='float:left;' class='mdl-cell mdl-cell--4-col charm-wrapper'><div class='mdl-card-wrapper charm-inner'><div class='demo-card-wide mdl-card mdl-shadow--8dp'><div class='mdl-card__media'>"+locicon+"<a href='"+popupurl+"' id='myAnchor' ><div style='position:relative;'><div style='position:absolute;z-index:9;right:0px;bottom:0px;'><img width='32px' src='"+cf_assets+"img/hanger.png'></div><div id='imagearea_"+touch_id+"' title='"+title+"' class='imagearea loading'></div></div></a></div><div class='mdl-card__title'><div class='right-charm'><div class='social-share'>"+copycontent+""+watsapp+"<a onclick='sharetofb(\'"+ct_domain+socialshare_url+"\');' title='Facebook' id='fb"+touch_id+"' class='fb_share'></a><a onclick='sharetotwitter(\'"+ct_domain+socialshare_url+"\');' title='Twitter' id='tw"+touch_id+"' class='tw_share'></a></div></div><div class='icharm'><h2 class='mdl-card__title-text'>"+subtitle+"</h2><div class='mdl-card__subtitle-text'>"+title+"</div><div id='vid_"+touch_id+"' class='mdl-card__subtitle-videoname'>"+videoname+"</div></div></div></div></div></div>";

    $('#main-home-page-inner').add(HTML(data));
    callcloudinary(imgurl,title,touch_id);
    callmasonry();

    if(i == setarr.length-1)
    
        localStorage.touchids=touchid_arr.join(",");
        localStorage.searchresults=gcharmarr.join(",");
    
    
 // WHY????

$('myAnchor').on('click',function(ev) 
ev.preventDefault();
openpopup(ev.target.getAttribute("popupurl"));
sendpym(ev.target.getAttribute("data-charmid"));

查看如何在变量中正确使用引号 ' 和 " w3schools.com - javascript Strings

【参考方案2】：

您可以通过在最后从处理函数返回 false 来轻松做到这一点。

Refer to this post for more details

另外，如果你使用 JQuery，你可以使用类似的东西：

$('a').on('click',function(e) 
     e.preventDefault();
     // Do your other stuff.
);

在此示例中，我通过标记名定位您的锚标记。改为添加类或 ID。

【讨论】：

我收到以下错误 Uncaught TypeError: Cannot read property 'getAttribute' of null。弹出窗口打开但没有内容。请帮助

嗨 behnam bozorg 我按照说明进行操作，但仍然收到错误的意外标识符

是否可以单独使用核心javascript来解决这个问题。我不想使用 jquery

如果任何使用 minified.js /core javascript/html 的解决方案也对我有用

是否可以为所有锚标签应用更改。