A标签触发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>。（总是跳转到当前页面顶部，当页面内容较多时，还是会有跳转的感觉）

赞 (0)

相关推荐

  • js动态添加onclick事件可传参数与不传参数

    1)当方法没有参数时,赋值可以直接用onclick = 方法名 window.onload = function() { $('btnTest').onclick = test; } function test() { alert(val); } 2)当方法有参数时,用onclick = 方法名(参数)时就有错了,需要在方法名前面加function() window.onload = function() { $('btnTest').onclick= function() { test(1)

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

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

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

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

  • 详解a标签添加onclick事件的几种方式

    我们常用的在a标签中有点击事件: 1. a href="javascript:js_method();" rel="external nofollow" 这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的href属性的时候不仅会导致不 必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放.W3C标准不推荐在href里面执行 javascript语句 2. a href="jav

  • JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法

    JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法

    本文实例讲述了JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法.分享给大家供大家参考,具体如下: 这里演示js如何给页面中所有的img对象加上onclick事件,且实现在新窗体中查看该图片文件的功能: <script type="text/JavaScript" language="javascript"> <!-- ///给页面中所有img对象添加onclick事件 //author:aganar /// function

  • PHP利用header跳转失效的解决方法

    本文实例讲述了PHP利用header跳转失效的解决方法,分享给大家供大家参考.具体方法分析如下: 一.问题: 今天header(\"Location: $url\"),以往跳转总是可以的,今天却不动,只是输出结果,以往自己要确认检查,$url的值获取的是否正确,所以在前面加了echo $url:来调试用,结果就导致了header函数的无效. 二.解决方法: 在PHP中用header("location:test.php")进行跳转要注意以下几点: 1.locatio

  • Android 表情面板和软键盘切换时跳闪问题的解决方法

    Android 表情面板和软键盘切换时跳闪问题的解决方法

    现在很多应用都会在让用户输入各种文本信息的时候同时多提供一个表情面板,这样就会出现一个问题,即表情面板的跳闪问题要输入文本信息,那固然是需要弹出软键盘,在软键盘显示的情况下,此时如果要切换显示出表情面板,由于表情面板不可能和用户的软键盘高度恰好一样,此外由于控件的上下移位,就会出现表情面板的跳闪现象 在点击切换按钮的时候,表情面板会先向上跳,然后再往下移,这样就会带来很差的用户体验,效果如下图所示: 这里提供一个解决方案,使软键盘和表情面板可以很自然地切换,效果如下图所示: 解决思路主要是这样:

  • Jquery on方法绑定事件后执行多次的解决方法

    这两天工作中遇到使用js动态加载内容,同时需要对加入的内容绑定点击事件的,当时想想了想可以使用内联的onclick 来实现,后来没有这样做,使用的是 on('click',function(){}) ,然而使用on方法的时候就发现,on 对同一个元素多次绑定同一个事件的时候,这个事件就会执行多次. 下面给出这种情况的实例: $(function(){ $(".add").click(function(eve){ $(".btn-area").append("

  • onclick和onblur冲突问题的快速解决方法

    onclick和onblur冲突问题的快速解决方法

    新浪首页的搜索框里面有一个使用ajax的下拉框.我们需要实现一个点击下拉框里面的一项,让搜索框里面的值变成这一项,同时下拉框消失的效果,但同时在点击其他地方的时候,这个下拉框也要消失.大致如图: 我们同时使用onblur和onclick来使下拉框隐藏,但是更大的问题出现了,这两个功能相冲突,onblur过于强悍,根本没有onclick方法实现的机会,搜索框无法获取点击项的内容.这个就是我们想要解决的onclick和onblur冲突问题. 对应这个问题,这里我们介绍两种解决办法: 1. 使用set

  • 微信小程序出现wx.navigateTo页面不跳转问题的解决方法

    微信小程序出现wx.navigateTo页面不跳转问题的解决方法

    本文实例讲述了微信小程序出现wx.navigateTo页面不跳转问题的解决方法.分享给大家供大家参考,具体如下: 今天在做微信小程序的时候,做的商品购买流程.流程是这样的: 商品展示-->商品详情-->下单页面-->下单详情页面-->支付结果页面-->跳转订单详情页面. 但是在支付成功之后,点击按钮跳转,发现怎么也跳转不了到订单详情页面,前后log都能打印出来,证明已经执行了wx.navigateTo方法,但是跳转不成功,而且,坑爹的是也不报错. 翻看微信小程序开发文档,参考

  • window.location.href IE下跳转失效的解决方法

    复制代码 代码如下: <a href="javascript:void(0)" >GoNext</a> $("a").click(function(){ window.location.href = "xxx.html"; }) 代码如上,在IE下,特别是在IE6中,点击超链接之后,浏览器并没有发生跳转行为. 原因可能是因为在href中的javascript:void(0)阻止的事件行为,解决方法如下: 1.在onclic

随机推荐