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

Question

在我的网站中，当我点击图片时，它会使用 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);
           });

Answer 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

Answer 2

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

Refer to this post for more details

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

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

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