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

 

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

相关文章推荐

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

在web页面开发时,我们经常会遇到下列情况: 1.一个标签仅仅是要触发onclick行为; 2.表现上要有鼠标的pointer指针显示,或者其他类似a标签的视觉效果。 比如执行删除操作时,为了避...
  • koches
  • koches
  • 2012年05月28日 08:34
  • 732

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

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

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

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

关于A标签使用onclick事件的疑问,若是href="#",跳转无反应,以及href=#与href=javascript:void(0)的区别

${i.index} 解决办法 浅谈href=#与href=javascript:void(0)的区别,需要的朋友可以参考一下 #"包含了一个位置信息 默认的锚点...

HTML的<a>标签点击实现不跳转

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

设置d点击a标签不跳转

以下内容不是新技术,是个人的一些整理,确实有借鉴其他闪文的地方,请原文作者谅解。   前不久做网站时,用到导航栏这种东西,随便从脚本之家上搜了一种效果了事。具体情况是,导航栏父级菜单没有链接功能...

js设置a标签href不跳转 禁止跳转

转自: http://www.cnblogs.com/lipanpan/p/4095524.html1.方法当页面中a标签不需要任何跳转时,从原理上来讲,可分如下两种方法:1.标签属性href,使其...

<a>标签跳转和执行js函数,href和onclick属性

链接的onclick 事件被先执行,其次是href属性下的动作(页面跳转,或 javascript 伪链接); 假设链接中同时存在href 与onclick,如果想让href 属性下的动作不执行,on...

jquery A标签onclick事件

  • 2011年01月06日 22:40
  • 1KB
  • 下载

form表单提交不跳转的方式

  • 2017年10月08日 17:17
  • 3.88MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:A标签触发onclick事件而不跳转
举报原因:
原因补充:

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