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

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

首先她的点击事件没有加给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，语义感强，易理解，不易出错。

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

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

如何通过JS动态给li标签添加点击事件并跳转
如何给li标签添加点击事件一.HTML demo代码二.JS动态新增li并绑定点击事件三.效果图有很长一段时间没写博客了,最近做了一个类似于榜单的小需求,遇到了一些小问题,姑且简单的记录一下吧 ...
给父元素添加点击事件时，获取到的 event.target 为子元素（point-events: none 的妙用）
目录场景分析解决场景使用 ion-select 组件时,点击下拉图标点击事件的 event.target,不是图标本身的 DOM,而是图标子元素的 DOM 这会导致 popover 无法计 ...
uni-app中Card slots的使用（添加点击事件）（uni-card）
uni-app官方文档中只给出了action底部插槽的使用的例子.对于初学者来说,当需要在卡片顶部添加点击事件时,往往也需要一个例子来引路. 这里是使用title(卡片头部插槽)在顶部添加点击事件,如 ...
标签页添加点击事件和拖拽事件
:draggable="true" 放在Tabs表示标签页可拖拽 @on-drag-drop="handleDragDrop" 给Tabs添加拖拽事件: cha ...
Android 动态添加标签及其点击事件
在做Android开发的时候,会遇到动态添加标签让用户选择的功能,所以自己写了个例子,运行效果图如下. 标签可以左右滑动进行选择,点击的时候,会弹出toast提示选择或者取消选择了哪个标签.通过动态添 ...
android html图片点击事件,Android TextView加载HTMl图文之添加点击事件和查看图片
前言用TextView显示Html图文,每一个需求都是需要探索的,不再是简单的添加点击事件就可以了. 1.如何添加点击事件这里要使用上在Html.forHtml()方法中的第四个参数:Html.T ...
如何给Vue v-for循环渲染出的元素（导航栏）批量添加点击事件及点击后添加css类样式及点击后路由跳转切换
如何给Vue v-for循环渲染出的元素批量添加点击事件及点击后添加css类样式及点击后路由跳转切换能够实现或解决的问题给Vue v-for循环出的元素批量添加点击事件,并以自己在数组中 ...
关于a标签的点击事件触发无效的问题
Write By Monkeyfly 以下内容均为原创,如需转载请注明出处. 前提项目为:xxxx管理系统.在该系统中,可以通过点击左侧的菜单(导航栏)来实现右边内容的切换.而且内容区的页面都是嵌套 ...
iostext添加点击事件_iOS给UILabel添加点击事件
前言:笔者最近需要实现给UILabel中的链接添加点击事件的功能.使用so.com查了下,发现TTTAttributedLabel的封装程度比较好.整理了TTTAttributedLabel的基本使用 ...

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

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

最新文章

热门文章