如何防止所有锚标记的默认操作打开href URL

Question

我想学习如何使用：

document.getElementById("myAnchor").addEventListener("click", function(event){
  event.preventDefault()
});

或任何其他方式来防止所有锚标记的默认操作使用核心 javascript 或缩小的 javascript 中的任何方式打开其中的 href URL，并在 EventListener 中打开 URL。

   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 id="myAnchor" href = '"+popupurl+"'>\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')");*/
      }
       document.getElementById("myAnchor").addEventListener("click", function (event) {

        event.preventDefault();
  openpopup('"+popupurl+"');
  sendpym('"+touch_id+"','0');

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

Answer 1

我会使用.getElementsByTagName()来获取页面上所有锚标记的数组，然后您可以循环遍历这些，向您的问题中提到的添加一个类似的事件侦听器。

我已经创建了一个小提琴，但要点是：

var test = document.getElementsByTagName("a");

for(i = 0; i < test.length; i++ ){
    test[i].addEventListener("click", function(e) {
        e.preventDefault();
    });
};

Answer 2

主要在React 中使用如下：

const = someEventHandeler = (event) => {
     event.preventDefault();
}