“点击查看显示全文”遇到的超链接默认访问的问题

今天在做一个例子，就是很常见的点击展开全文。

我觉得这是一个很简单的效果，也就几行代码的事，结果点击了以后立刻隐藏不见，控制台代码也不报错，耽误了我很长时间，最后才发现问题出在超链接身上。
“展开全文”是一个超链接，html代码如下。

<a href="" class="showAll">展开全文</a>

为了使 超链接显示如图所示的效果，它的CSS代码如下，向下的箭头这里是用图片做背景实现的。

.showAll{
				text-decoration: none;
				display: block;
				width: 120px;
				height: 34px;
				line-height: 34px;
				border: 1px solid #d8e7d4;
				border-radius: 20px; 
				text-align: center;
				color:#318510;
				background: url(./images/showall2.png) no-repeat 95px center #e9f4e5;
			
			}

javaScript代码如下。

		<script>
			window.addEventListener('load', function() {
				var whole = document.querySelector('.showAll')
				whole.addEventListener('click',function() {
					document.querySelector(".intro").style.display = "block"
					this.style.display = 'none'
				})
			})
		</script>

结果按照以上的代码运行的时候，显示后快速消失，而其实js代码并没有语法逻辑等错误，我后来把click换成mouseover，可以正常执行，说明问题出在click点击事件上。而点击对于超链接会带来什么问题呢？超链接有默认的访问行为，我觉得自己找到了问题所在，去看了一下html代码，果然，在敲代码的时候，href=“”，里面什么也没有，我改成了href=“#”，就正常了。
为了程序更严谨，有两种方法：
第一种方法，可以把超链接按如下方式写：

<a href="javascript:void(0);" class="showAll">展开全文</a>

使用javascript:void(0);当用户点击以后不会发生任何事，从而去掉超链接的默认访问行为。

第二种方法，如果不修改html代码，还可以使用preventDefault()阻止默认行为，传递参数event，在javascript中加上一句 e.preventDefault() ，代码如下。

		<script>
			window.addEventListener('load', function() {
				var whole = document.querySelector('.showAll')
				whole.addEventListener('click',function(e) {
				    e.preventDefault()     //  阻止超链接的默认行为
					document.querySelector(".intro").style.display = "block"  //隐藏的部分显示
					this.style.display = 'none'
				})
			})
		</script>