超链接触发onclick事件而不跳转

在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-08-04 02:28:02

超链接触发onclick事件而不跳转的相关文章

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

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

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

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

动态生成的DOM不会触发onclick事件的原因及解决方法_jquery

最近朋友在做一个项目的时候,遇到动态加载微博内容,然后点击"展开评论"后获取该微博的所有评论.这里使用了动态加载的<span mid='123456789′ class='get_comment'>点击加载评论</span>. 然后再写 $(".get_comment).click(function(){ //响应事件逻辑 }) 发现click事件并不会触发,使用控制台侦听也木有错误.百思不得其解时, 因为我在以前做搜狐家居商城的运费管理时,也曾遇到,

为什么我的onclick事件在ie上能触发,在火狐和chrome上触发不了?

问题描述 为什么我的onclick事件在ie上能触发,在火狐和chrome上触发不了? js语句 function download(){ window.location="<%=host%>/appcenter/importAction.do?operFlag=dload"; } onclick事件 <a id="down" style="margin: auto" href="javascript:void(0);

js触发asp.net的Button的Onclick事件应用_javascript技巧

在asp.net引入事件驱动之后,在一个页面上很容易解决多个按钮触发不同事件的问题,避免了在asp中需要多个form或者通过js脚本来控制的麻烦. asp.net带来便利的同时,也带来一个问题.在实际应用中一个页面存在多个按钮的情况并不多.用户习惯于在输入框输入内容之后,直接按回车就提交表单了.由于asp.net采用的是事件驱动模式,所以默认用户按回车并没有触发按钮的onclick事件.用户按回车也不是没有提交表单,通过httpwath可以看到,实际上页面表单是提交到了form下的action页

onclick事件

问题描述 想把这个页面的产品数据复制下来,http://www.chinaqingnian.net/?m=product点击是触发onclick事件,浮动开一个窗口<ahref="javascript:void(0);"onclick="showproduct(2993)">0003304135</a>,看源代码还是看不到浮动窗口的数据.showproduct保存在一个js文件里,请问要怎样看这个浮动窗口的真实urlfunctionshowp

java-jstl表达式下onclick事件失效

问题描述 jstl表达式下onclick事件失效 c:if标签下有一个input语句,这个语句里有一个onclick事件,但是点击并没有触发onclick事件,各位大神怎么破? 解决方案 页面刷出来之后看源代码里有没有if判断下的html 在onclick里写上alert('1')看会不会弹出提示 最好把代码贴出来 解决方案二: 把你的代码发出来,看你怎么写的 解决方案三: 改成这样试试 如果只弹1不弹2就是showadddiv报错了 或者直接用浏览器看点击的时候报什么错了

在Gridview中添加新的linkbutton而不触发rowcommand事件

问题描述 这是我修改前的Gridview界面,点击"查看",会触发rowcommand事件,弹出下载页面:我想在其中加一个linkbutton,点击时会跳转到某一aspx页面,如下图现在问题是添加之后总是触发rowcommand事件,弹出下载页面,即跟"查看"按钮效果是一样的.所以请问,如何在Gridview中添加一个linkbutton,点击该linkbutton,会跳转到某一aspx页面,代码如何写? 解决方案 解决方案二:贴一下更新的html代码解决方案三:

新手请教,如果使用ImageButton控件只触发单击事件,而不提交到服务器,谢谢!

问题描述 新手请教,如果使用ImageButton控件只触发单击事件,而不提交到服务器,谢谢! 解决方案 解决方案二:returnfalse;解决方案三:把他的服務器端事件刪掉,添加客戶端的Click如:<igtxt:WebImageButtonID="btnQuery"runat="server"Text="查詢"><ClientSideEventsClick="btnQuery_Click"/>//