a标签触发onclick事件而不跳转href指定路径

在web页面开发时,我们经常会遇到下列情况:

1.一个标签仅仅是要触发onclick行为;

2.表现上要有鼠标的pointer指针显示,或者其他类似a标签的视觉效果。

比如执行删除操作时,为了避免误操作,我们要弹出对话框让用户确定是否删除。因此我们经常会用链接<a></a>形式代替<button> 触发onclick事件。

代码如下:

<script type="text/javascript">
function del(){
if(confirm("确定删除该记录?")){
parent.window.location="执行删除.jsp";
return true;
}
return false;
}
</script>

<a href="" target="mainFrame" class="STYLE4" onclick="del()" >删除</a>

这样做的后果是js代码会跳转到"执行删除.jsp"页面,而<a>标签也会跳转打开一个空页面。因为html本身对 <a>标签的href属性做了处理,所以就会先执行我们自己定义的方法,接着再运行它自身的方法(跳转的方法)。

解决方法主要有四种,如下:

1. 不用a标签,设定css或用js来表现(有点复杂);

2. 用a标签,onclick属性或onclick事件中返回false;(个人喜欢)

如:<a href="" target="mainFrame" class="STYLE4" onclick="del();return false" >删除</a>

这是个执行顺序的问题,<a>这个标签的执行顺序应该是先执行onclick 的脚本,最后才进行href参数指定页面的跳转。在onclick中返回false,就可以中止<a>标签的工作流程,也就是不让页面跳转到href参数指定的页面。

3. 用href="javascript:void(0)"这种伪协议;(这种伪协议,少写的好)
即:<a href="javascript:void(0)" target="mainFrame" class="STYLE4" onclick="del()" >删除</a>

4. <a href="#" class="STYLE4" onclick="del()" >删除</a>。(总是跳转到当前页面顶部,当页面内容较多时,还是会有跳转的感觉)

时间: 2024-10-29 03:18:34

a标签触发onclick事件而不跳转href指定路径的相关文章

A标签触发onclick事件而不跳转的多种解决方法

A标签触发onclick事件而不跳转的多种解决方法 一个标签仅仅是要触发onclick行为,遇到了A标签触发onclick事件时不执行跳转: 在web页面开发时,我们经常会遇到下列情况: 1.一个标签仅仅是要触发onclick行为: 2.表现上要有鼠标的pointer指针显示,或者其他类似a标签的视觉效果. 比如执行删除操作时,为了避免误操作,我们要弹出对话框让用户确定是否删除.因此我们经常会用链接<a></a>形式代替<button> 触发onclick事件. <

点击a标签触发事件而不跳转页面

有时候需要让a标签像button一样,被点击的时候触发事件而不跳转页面. <html> <body> <a id="a1" href="#none" onclick="a_click(this.id)">Click a1</a> <a id="a2" href="javascript:void(0);" onclick="a_click(thi

JQuery模拟点击页面上的所有a标签,触发onclick事件

注意: 这种方法需要给所有的a标签加上id属性 <script> $(function () { // 模拟点击页面上的所有a标签,触发onclick事件 $("a").each(function () { document.getElementById(this.id).click(); }) }) </script> 原文地址:https://www.cnblogs.com/daleyzou/p/9500782.html

JavaScript基础 a标记 使用onclick事件阻止默认跳转 onclick事件 与 跳转 ,onclick事件优先执行。

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

【Javascript】IE8兼容 背景图片与a标签的onclick事件

先说几句牢骚话. 虽然IE8比之IE6.7有很大的进步,但是在执行效率.兼容性上仍然有很多问题.被广大开发者喜爱的平台才是好平台. 可惜多亏当年盗版XP打开中国的计算机市场,IE作为一款捆绑软件仍然在中国有很大的使用人群.既然是中国人自己埋下的坑,咬着牙也要走下去. a标签的onclick事件 在开发现在这个平台时,用的是国产dwz开源前端框架,还是挺好用的,对IE的兼容性做的也比较好,很少发现有啥大问题. 只是如开头标题所示,页面弹出提醒框时,[确定]按钮点不了,导致页面相当于死机一样,只能重

深入A标签点击触发事件而不跳转的详解

本文介绍下,当点击A标签时,触发事件但不跳转的实现方法,有需要的朋友参考下吧. 点击页面上的空链接,点击后页面自动刷新,并会定位到页面顶端. 不过,有时需要点击#页面但不作跳转,可以这样写: <a href="#2">脚本学堂---网站编程</a> 在#后加上点别的东西即可,这样就不会链到别的页面,也不会刷新定位到顶端了. 附,A标签点击触发事件但不跳转的实现方法. 在a标签中有点击事件:1. a href="javascript:js_method(

点击button触发onclick事件判空后依旧自动跳转

这是一个前端的问题. 其中判断字符串为空的脚本代码是这样的: var remark = $("#Remark").val(); //判空.注意:var reg = /空格/g; var reg = / /g; var tmp = remark.replace(reg, ""); 先把所有空格去除,通过判断tmp是否为空来判断文本框是否为空. 问题是这样的:我点击button后,触发js脚本判断input框是否为空,如果为空就提示出错.否则提交表单. 结果是这样的:我

利用事件的冒泡特性,为子标签添加Onclick事件

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript

a标签增加onclick事件

<asp:UpdatePanel runat="server" ID="UpdatePanel2"> <ContentTemplate> <SOA:DeluxeGrid ID="dgTemps" runat="server" DataKeyNames="Id" DataSourceID="datasource" PageSize="10"