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

本文介绍下,当点击A标签时,触发事件但不跳转的实现方法,有需要的朋友参考下吧。

点击页面上的空链接,点击后页面自动刷新,并会定位到页面顶端。

不过,有时需要点击#页面但不作跳转,可以这样写:

<a href="#2">脚本学堂---网站编程</a>

在#后加上点别的东西即可,这样就不会链到别的页面,也不会刷新定位到顶端了。

附,A标签点击触发事件但不跳转的实现方法。

在a标签中有点击事件:
1.

a href="javascript:js_method();"

在传递this等参数时,很容易出问题,而且javascript:协议作为a的href属性时,不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。
W3C标准不推荐在href里面执行javascript语句。

2.

a href="javascript:void(0);" onclick="js_method()"

最常用的方法,也是最周全的方法,onclick方法负责执行js函数,而void是一个操作符,void(0)返回undefined,地址不发生跳转。
而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。

3.

a href="javascript:;" onclick="js_method()"

这种方法跟跟2种类似,区别只是执行了一条空的js代码。

4.

a href="#" onclick="js_method()"

#是标签内置的一个方法,代表top的作用。用这种方法点击后网页后返回到页面的最顶端。

5.

a href="#" onclick="js_method();return false;"

点击执行js函数后return false,页面不发生跳转,执行后还是在页面的当前位置。

taobao采用的是第2种方法,而alibaba的主页是采用的第1种方法,和本文的区别是每个href里的javascript方法都用try、catch包围。

综合上述,在a中调用js函数的方法,推荐使用:

a href="javascript:void(0);" onclick="js_method()"
a href="javascript:;" onclick="js_method()"
a href="#" onclick="js_method();return false;"

就介绍这些了,已经比较全面了,希望对大家有所帮助。

时间: 2024-11-09 14:37:19

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

点击a标签触发事件而不跳转页面

有时候需要让a标签像button一样,被点击的时候触发事件而不跳转页面. <html> <body> <a id="a1" href="#none" onclick="a_click(this.id)">Click a1</a> <a id="a2" href="javascript:void(0);" onclick="a_click(thi

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

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

Android View 事件分发机制源码详解(View篇)

前言 在Android View 事件分发机制源码详解(ViewGroup篇)一文中,主要对ViewGroup#dispatchTouchEvent的源码做了相应的解析,其中说到在ViewGroup把事件传递给子View的时候,会调用子View的dispatchTouchEvent,这时分两种情况,如果子View也是一个ViewGroup那么再执行同样的流程继续把事件分发下去,即调用ViewGroup#dispatchTouchEvent:如果子View只是单纯的一个View,那么调用的是Vie

iOS中touches事件,addtarget ...action和GestureRecognizer详解

刚学完uiview,uicontrol类,许多人知道 touchesBegain,touchesMoved,touchesEnd,GestureRecognizer的用途,但仔细考虑这些事件之间的关系,却令人头疼. 现在以一个例子来分析它们的内部实现: - (void)viewDidLoad { UIButton * btn=[[UIButton alloc]initWithFrame:CGRectMake(20, 40, 50, 50)]; [self.view addSubview:btn]

Android Studio中设置一个按钮的不同点击触发事件

my_day_model = (RelativeLayout) v.findViewById(R.id.my_day_model);my_day_pic = (ImageView) v.findViewById(R.id.my_day_pic);my_day_text = (TextView) v.findViewById(R.id.my_day_text);my_day_model.setOnClickListener(new View.OnClickListener() { @Overrid

a标签触发onclick事件而不跳转href指定路径

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

JS点击触发事件 AJAX传值

1 <script> 2 $(function () { 3 $("#pageData").delegate(".purchaseModal","click", function(event){ 4 var $this = $(this); 5 var sku = $this.parents("tr").find("td:eq(0)").text(); 6 $(".modal-body

ztree 为节点添加点击触发事件

<SCRIPT type="text/javascript"> var setting = { data : { key : { title : "code"} }, callback: { onClick: zTreeOnClick } }; function aaa(){ $.fn.zTree.init($("#treeDemo"), setting, zNodes); }; aaa(); </SCRIPT> 原文地址

Android中点击事件的四种写法详解

Android中点击事件的四种写法使用内部类实现点击事件使用匿名内部类实现点击事件让MainActivity实现View.OnClickListener接口通过布局文件中控件的属性 第一种方法:使用内部类基本步骤如下: 新建一个MyOnClickListener类并实现View.OnClickListener接口 重写View.OnClickListener接口中的OnClick(View view)方法 给Button绑定一个监听器,并监听一个点击事件示例代码如下: public class