简谈a标签与添加点击事件_IT百科

最近在学习vue基础，想给a添加一个点击事件，没有注意到a的href设为了空，导致页面一直在刷新，点击事件根本就没有进去

后来知道a标签的href会导致默认人的页面跳转事件，如果为空值，就会刷新页面。

因为这个小的问题，就重新看了一下给a绑定点击事件注意的小地方，记录一下

1.链接的 onclick 事件被先执行，其次是 href 属性下的动作（页面跳转，或 javascript 伪链接）；

2.如果在链接的 href 属性中调用一个有返回值的函数，当前页面的内容将被此函数的返回值代替；

3.假设链接中同时存在 href 与 onclick，如果想让 href 属性下的动作不执行，我们需要阻止默认行为,

这个很简单如果楼主有jq只需要

$(document).on("click","a",function(){

alert("我是被监听的a标签")

})

如果楼主没有引入jq 那么下面给楼主写一份原生js监听

<!DOCTYPE html>

<html>

<head>

</head>

<body>

//添加事件可以使用addEventListener 或者 attachEvent下面使用传统事件添加

document.onclick=function(){

var e=null

if(window.event){

e=window.event

}else if(event){

e=event

}else{

e=arguments.callee.argument[0]

}

//获取事件目标

var target=null

if(e.target){

target=e.target

}else{

target=e.srcElement

}

if(target.nodeName.toUpperCase()=="A"){

alert("我是被监听的A标签")

}

var a=document.createElement("a")

a.innerHTML="我想被监听"

document.body.appendChild(a)

</script>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

简谈a标签与添加点击事件