如何在錨標記中使用onclcik和href並僅使onclick有效。href僅適用於Google抓取

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字符串

Answer 2

您可以通過最后從處理程序函數返回false來輕松實現此目的。

請參閱此帖子以獲取更多詳細信息

另外，如果您使用的是JQuery，則可以使用如下所示的內容：

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

在此示例中，我按標記名定位您的錨標記。 而是添加一個類或ID。