首页 >web前端 >js教程 >a标签触发onclick事件而不跳转

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

伊谢尔伦
伊谢尔伦原创
2016-11-22 14:17:001415浏览

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

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

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

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

代码如下:

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

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

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

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

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

如:e0b35813b66560365798434c1bcb15d7删除5db79b134e9f6b82c0b36e0489ee08ed

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

3. 用href="javascript:void(0)"这种伪协议;(这种伪协议,少写的好)
即:edbea579c93be2fa6ade3f6711310c2f删除5db79b134e9f6b82c0b36e0489ee08ed

4. d913a94c44f5de25298328c09f1d0ac2删除5db79b134e9f6b82c0b36e0489ee08ed。(总是跳转到当前页面顶部,当页面内容较多时,还是会有跳转的感觉)

其他知识:

下面的代码创建了一个超级链接,用户单时会提交表单。 c1628146f2b0eb9ec32e575a6a60c960单此处提交表单63505a6f727f70c8bd4066f3066dcb9d

a标签中href ="#"中的#是锚点的意思  也可以认为是当前页面

下面是锚的使用方法:

<!-- 定义一个锚。 -->
<a name="anchor">锚点</a>
<!-- 本页面的一个连接,连接到锚: -->
<a href="#anchor">锚</a>

效果是:点击锚就转到了锚点段落。


声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn