A标签触发onclick事件而不跳转

原创 2013年12月04日 09:54:04

文章转载自:http://blog.csdn.net/zhouyong0/article/details/6457170

 

在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>。(总是跳转到当前页面顶部,当页面内容较多时,还是会有跳转的感觉)

 

备注:我个人觉得熟悉浏览器对空间默认操作流程还是很重要的,这样自己就不会迷茫而多做一些“无谓”的尝试了

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

本文介绍下,当点击A标签时,触发事件但不跳转的实现方法,有需要的朋友参考下吧。 点击页面上的空链接,点击后页面自动刷新,并会定位到页面顶端。 不过,有时需要点击...
  • langqiao123
  • langqiao123
  • 2014年02月10日 15:56
  • 5979

html <a>标签触发不了onclick()事件

function text(){ alert('s'); } 跳转怎么都不触发,发现onclick事件名称 和 锚点的ID是一样,改成不同的就可以了...
  • qq_37176929
  • qq_37176929
  • 2017年05月25日 12:02
  • 543

a标签触发onclick事件而不跳转弹窗的n多种方法

一个标签仅仅是要触发onclick行为,遇到了A标签触发onclick事件时不执行跳转,下面与大家分享下四种解决方法,感兴趣的朋友可以参考下哈 在web页面开发时,我们经常会遇到下列情况:  ...
  • u013947003
  • u013947003
  • 2014年05月19日 14:57
  • 1287

input替换为a标签,onclick事件不触发

今天遇到一个小问题,切换jsp按钮样式的时候,onclick事件报错404. 原标签为:,改为:跳转至后,出现下面错误: 在网上查找资料后,改为:"javascript:void()" class...
  • u010937025
  • u010937025
  • 2015年12月23日 09:55
  • 957

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

一个标签仅仅是要触发onclick行为,遇到了A标签触发onclick事件时不执行跳转,下面与大家分享下四种解决方法,感兴趣的朋友可以参考下哈 在web页面开发时,我们经常会遇到下列情况: ...
  • u011450110
  • u011450110
  • 2015年03月28日 01:33
  • 215

用链接标签触发onclick事件而不跳转

整理自:http://www.javaeye.com/topic/287377 在web页面开发时,我们经常会遇到下列情况:1.一个标签仅仅是要触发onclick行为;2.表现上要有鼠标的pointe...
  • butterflydream
  • butterflydream
  • 2009年11月04日 10:39
  • 2432

jquery 自动触发<a> 标签的click()方法

今天想向自动触发标签的click事件,但是把事件绑定到 标签上,即$("#id").click(),但是没有任何反应,然后查了下,原来不能把click事件直接绑定到标签上,必须绑定到 标签之内的元素上...
  • chancewang001
  • chancewang001
  • 2015年04月09日 18:17
  • 8273

<a>标签onclick点击失效,触发不了。

工作中,需要做一个表格列表的操作。对行列进行删除,或者修改。 修改 | 删除 定义了这样的a标签跳转,一直触发不了。后来发现要在里面直接 申明函数,如果在 //页面加载完毕调用     $(d...
  • u013799833
  • u013799833
  • 2016年12月26日 09:58
  • 8949

jquery+javascript触发a标签的点击事件

在Jquery里触发click事件是$.click()就可以触发标签的点击事件,但是该事件去a标签没用 于是尝试了原生态的document.getElementById("bt").onclick()...
  • qq_26744901
  • qq_26744901
  • 2015年10月21日 19:53
  • 22466

页面跳转小试 - 模拟a.click事件

想实现重定向的功能,自然使用到 window.location.href=XXX。但是这种方法实现的是在当前页面下发生的跳转,本来的需求是不影响当前页面的使用,在新的选项卡下打开目标页面。 事后...
  • ceekor
  • ceekor
  • 2014年11月26日 21:19
  • 998
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:A标签触发onclick事件而不跳转
举报原因:
原因补充:

(最多只允许输入30个字)