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

Question

I want to learn how to use:

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

or any other way to prevent default action of all anchor tag from opening href URL in it using any ways in core javascript or minified javascript and open the URL in EventListener.

   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

I would use .getElementsByTagName() to get an array of all anchor tags on the page, you can then loop through these adding a similar event listener to the one mentioned in your question.

I've create a Fiddle but the gist is:

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

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

Answer 2

Mostly in React use like this:

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