如何防止所有锚标签的默认动作打开href URL
How to prevent default action of all anchor tag from opening href URL
我想学习如何使用:
document.getElementById("myAnchor").addEventListener("click", function(event){
event.preventDefault()
});
或任何其他方式来防止所有锚标记的默认操作使用核心 javascript 中的任何方式在其中打开 href URL 或缩小 javascript 并打开 URL 在 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);
});
我会使用 .getElementsByTagName()
来获取页面上所有锚标记的数组,然后您可以遍历这些标记,为您的问题中提到的标记添加一个类似的事件侦听器。
我创建了 a Fiddle 但要点是:
var test = document.getElementsByTagName("a");
for(i = 0; i < test.length; i++ ){
test[i].addEventListener("click", function(e) {
e.preventDefault();
});
};
主要在React中这样使用:
const = someEventHandeler = (event) => {
event.preventDefault();
}
我想学习如何使用:
document.getElementById("myAnchor").addEventListener("click", function(event){
event.preventDefault()
});
或任何其他方式来防止所有锚标记的默认操作使用核心 javascript 中的任何方式在其中打开 href URL 或缩小 javascript 并打开 URL 在 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);
});
我会使用 .getElementsByTagName()
来获取页面上所有锚标记的数组,然后您可以遍历这些标记,为您的问题中提到的标记添加一个类似的事件侦听器。
我创建了 a Fiddle 但要点是:
var test = document.getElementsByTagName("a");
for(i = 0; i < test.length; i++ ){
test[i].addEventListener("click", function(e) {
e.preventDefault();
});
};
主要在React中这样使用:
const = someEventHandeler = (event) => {
event.preventDefault();
}