解决给a标签添加点击事件时遇到的问题

最新推荐文章于 2024-05-27 08:30:00 发布

Web-once

最新推荐文章于 2024-05-27 08:30:00 发布

阅读量6.5k

点赞数 1

分类专栏： JS html 文章标签： a标签点击事件 JS

本文链接：https://blog.csdn.net/qq_42381297/article/details/83716400

版权

JS 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

html

6 篇文章 0 订阅

订阅专栏

前几天有人问我为什么她的点击事件不好使呢？效果闪一下就没有了？

首先她的点击事件没有加给button或者其他标签，当然a标签是可以加的，但是一般a标签我们都是用来链接到某个网页或位置，它的href属性一般是有值的，或者尽管没有给href属性值，也会有#或者javascript:;这种，那么问题就是出现在了这个属性上。

接下来分情况说一下：

href="#"

这个添加点击事件是没有问题的

href="javascript:;"

同#也是木有问题的

href=""

问题来了，测试时除alert(1);方式，其他OK，效果是一闪而过，显然不能达到我们日常的效果，当写上了href属性，就代表它有默认的点击事件，那就是跳到相应的页面或者页面位置，如果不写值，就会刷新页面，而一般我们测试时，通过点击某个按钮触发事件给页面添加效果时，再次刷新页面会回到原来的状态，所以href属性值什么都不写，反而给a标签又加点击事件，问题就出现了，效果刚有，又因为页面刷新，刚触发的效果又回到原始状态，这就是“一闪而过”的效果。

#号，会在地址栏里最后添加#，页面内容不刷新，不跳转，所以不会出现上述问题。

javascript:;是表示在触发默认动作时，执行一段JavaScript代码，而 javascript:; 表示什么都不执行，这样点击时就没有任何反应，所以不会出现上述问题。

解决方式：

阻止默认事件在新加的click事件中最后加一句：return false;上述问题可以解决。但是默认跳转页面功能会消失（这是必然，因为已经人为阻止这个行为的发生）。

无href属性

没有这个属性也就不会有默认刷新当前页面功能，所以不会出现上述问题。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
<a id="click1" href="#" title="">点击</a>
<a id="click2" href="javascript:;" title="">点击</a>
<a id="click3" href="" title="">点击</a>
<a id="click4" title="">点击</a>
<script>
	var oClick1 = document.getElementById('click1');
	var oClick2 = document.getElementById('click2');
	var oClick3 = document.getElementById('click3');
	var oClick4 = document.getElementById('click4');
	oClick1.onclick = function(){
		console.log(1);

		// return false;
	}
	oClick2.onclick = function(){
		console.log(1);

		// return false;
	}
	oClick3.onclick = function(){
		console.log(1);

		return false;
	}
	oClick4.onclick = function(){
		console.log(1);

		// return false;
	}
</script>
</body>
</html>

综上所述：一般制作按钮，没有跳转功能建议用button，语义感强，易理解，不易出错。

备注：这是我个人测试、理解之后写的，若有错误，欢迎评论或者私信~

Web-once

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
解决给a标签添加点击事件时遇到的问题

前几天有人问我为什么她的点击事件不好使呢？效果闪一下就没有了？首先她的点击事件没有加给button或者其他标签，当然a标签是可以加的，但是一般a标签我们都是用来链接到某个网页或位置，它的href属性一般是有值的，或者尽管没有给href属性值，也会有#或者javascript:;这种，那么问题就是出现在了这个属性上。接下来分情况说一下：href="#"这个添加点击事件是没有问题的...
复制链接

扫一扫