A标签触发onclick事件而不跳转的多种解决方法_javascript技巧 程序员文章站 2022-06-09 17:55:26 ... 在web页面开发时,我们经常会遇到下列情况: 1.一个标签仅仅是要触发onclick行为; 2.表现上要有鼠标的pointer指针显示,或者其他类似a标签的视觉效果。 比如执行删除操作时,为了避免误操作,我们要弹出对话框让用户确定是否删除。因此我们经常会用链接形式代替 触发onclick事件。 代码如下: 复制代码 代码如下: 删除 这样做的后果是js代码会跳转到"执行删除.jsp"页面,而标签也会跳转打开一个空页面。因为html本身对 标签的href属性做了处理,所以就会先执行我们自己定义的方法,接着再运行它自身的方法(跳转的方法)。 解决方法主要有四种,如下: 1. 不用a标签,设定css或用js来表现(有点复杂); 2. 用a标签,onclick属性或onclick事件中返回false;(个人喜欢) 如:删除 这是个执行顺序的问题,这个标签的执行顺序应该是先执行onclick 的脚本,最后才进行href参数指定页面的跳转。在onclick中返回false,就可以中止标签的工作流程,也就是不让页面跳转到href参数指定的页面。 3. 用href="javascript:void(0)"这种伪协议;(这种伪协议,少写的好) 即:删除 4. 删除。(总是跳转到当前页面顶部,当页面内容较多时,还是会有跳转的感觉) 相关标签: A标签 onclick 不跳转 上一篇: vue为什么要求组件模板只能有一个根元素 下一篇: 经典面试题a == 1 && a== 2 && a== 3 推荐阅读 A标签触发onclick事件而不跳转的多种解决方法_javascript技巧 IE8的JavaScript点击事件(onclick)不兼容的解决方法_javascript技巧 A标签触发onclick事件而不跳转的多种解决方法_javascript技巧 IE8的JavaScript点击事件(onclick)不兼容的解决方法_javascript技巧