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

今天在做一个例子，就是很常见的点击展开全文。
在这里插入图片描述
我觉得这是一个很简单的效果，也就几行代码的事，结果点击了以后立刻隐藏不见，控制台代码也不报错，耽误了我很长时间，最后才发现问题出在超链接身上。
“展开全文”是一个超链接，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>