给a标签添加点击事件却无效

最新推荐文章于 2023-03-10 09:59:05 发布

husterxsp

最新推荐文章于 2023-03-10 09:59:05 发布

阅读量8.5k

点赞数

分类专栏： javascript 文章标签： a标签

本文链接：https://blog.csdn.net/xsp_Login/article/details/46725055

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

整理笔记，看到一个bug,代码大意如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 20px;
            background-color: red;
            display: none;
        }
    </style>
</head>
<body>
<div></div>
<a href="">点击</a>
<script>
    document.querySelector('a').onclick = function(){
        document.querySelector('div').style.display = 'block';
    }
</script>
</body>
</html>

运行后会发现div并没有添加样式，但是会看到一瞬间的闪现，打断点调试可以观察到，点击事件之后，页面又刷新了。
原因：a标签的href会导致默认人的页面跳转事件，如果为空值，就会刷新页面，所以就会出现上述的问题。可以改为href=’#’或者href=”javascript:;”等。或者使用e.preventDefault();解决。

另附上一个回答：

html页面a标签可以不写href属性吗？

husterxsp

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
给a标签添加点击事件却无效

整理笔记，看到一个bug,代码大意如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 100px; height
复制链接

扫一扫

专栏目录