深入A标签点击触发事件而不跳转的详解
本文介绍下,当点击A标签时,触发事件但不跳转的实现方法,有需要的朋友参考下吧。
点击页面上的空链接,点击后页面自动刷新,并会定位到页面顶端。
不过,有时需要点击#页面但不作跳转,可以这样写:
在#后加上点别的东西即可,这样就不会链到别的页面,也不会刷新定位到顶端了。
附,A标签点击触发事件但不跳转的实现方法。
在a标签中有点击事件:
1.
在传递this等参数时,很容易出问题,而且javascript:协议作为a的href属性时,不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。
W3C标准不推荐在href里面执行javascript语句。
2.
最常用的方法,也是最周全的方法,onclick方法负责执行js函数,而void是一个操作符,void(0)返回undefined,地址不发生跳转。
而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。
3.
这种方法跟跟2种类似,区别只是执行了一条空的js代码。
4.
#是标签内置的一个方法,代表top的作用。用这种方法点击后网页后返回到页面的最顶端。
5.
点击执行js函数后return false,页面不发生跳转,执行后还是在页面的当前位置。
taobao采用的是第2种方法,而alibaba的主页是采用的第1种方法,和本文的区别是每个href里的javascript方法都用try、catch包围。
综合上述,在a中调用js函数的方法,推荐使用:
a href="javascript:;" onclick="js_method()"
a href="#" onclick="js_method();return false;"
就介绍这些了,已经比较全面了,希望对大家有所帮助。
深入A标签点击触发事件而不跳转的详解的更多相关文章
- 点击 a 标签触发事件而不跳转页面
有时候需要让 a 标签像 button 一样,被点击的时候触发事件而不跳转页面. <html> <body> <a id="a1" href=&quo ...
- Easyui 关闭jquery-easui tab标签页前触发事件
关闭jquery-easui tab标签页前触发事件 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 需求场景 点击父页面tab 页关闭按钮时,需要做判断,判 ...
- 关于easyui框架中a标签使用onclick()触发事件偶尔会选项卡消失BUG解决方案
今天发现公司的一个easyui项目中有个页面会在触发onclick事件时选项卡消失,如下图 产生BUG后 产生BUG前 查找很多地方还有资料不知道哪里出现的问题,看了下框架源码之类的,因为不是专门的前 ...
- js代码点击触发事件
js触发按钮点击事件 function load(){ //下面两种方法效果是一样的 document.getElementById("target").onclick(); do ...
- Android Studio中设置一个按钮的不同点击触发事件
my_day_model = (RelativeLayout) v.findViewById(R.id.my_day_model);my_day_pic = (ImageView) v.findVie ...
- js事件委托的方式绑定详解
js事件绑定 事件绑定,这里使用了冒泡的原理,从点击的元素开始,递归方式的向父元素传播事件,这样做的好处是对于大量要处理的元素,不必为每个元素都绑定事件,只需要在他们的父元素上绑定一次即可,提高性能. ...
- js事件流 事件捕获 及时间冒泡详解
Javascript与HTML之间的交互是通过事件实现. 一.事件流 事件,是文档或浏览器窗口中发生的一些特定的交互瞬间.事件流,描述的是页面中接受事件的顺序.IE9,chrome,Firefox,O ...
- a标签点击触发 layer open 只显示背景解决
问题:公司网站突然说有个查看信息的点击不好使了,有时候点击无反应,但是href执行了,有时候弹出只有背景,不显示内容.网上找了a标签的各种方法尝试后,均不能解决. 代码:类似如下,method()方法 ...
- ztree 为节点添加点击触发事件
<SCRIPT type="text/javascript"> var setting = { data : { key : { title : "code& ...
随机推荐
- 如何以非 root 用户将应用绑定到 80 端口-ssh 篇
有时想以普通用户身份让应用跑在80端口?? linux下1024以下端口只有root用户才能bind,那怎样才能以普通用户身份绑定到80端口呢? 参考: http://stackoverflow.co ...
- UVA 11491 Erasing and Winning
题意: 给你一个n位整数,让你删掉d个数字,剩下的数字要尽量大. 分析: 用了vector数组模拟.如果当前要插入的数>vector数组里的最后一位数,就替换且d-- 代码: #include ...
- C# MVC分页,razor,view传送model
IMVCPages interface IMVCPages { int GetItemsCount(); int GetPageSize(); int GetPagesCount(); /// < ...
- HTML——JAVASCRIPT练习题——图片轮播
方法一: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- for练习--侦察兵
static void Main21侦察兵(string[] args) { //某侦察队接到一项紧急任务,要求在A.B.C.D.E.F六个队员中尽可能多地挑若干人,但有以下限制条件: //侦察兵A和 ...
- Sybase Power Designer 16.5破解版下载
http://pan.baidu.com/s/1ddsjs 下载后正常安装,然后将压缩文件里的dll文件拷到安装目录下覆盖原文件,启动Power Designer后,选择help-->abou ...
- HDU 1021 - Fibonacci Again
找规律,分析让 F[N] 每一项对 3 取余的余数: 1,2,0, 2,2,1,0, 1,1,2,0, 2,2,1,0, 1,1,2,0, 2,2,1,0 ......... 显然循环了 #inclu ...
- php5.6解决curl扩展不生效的问题
最近在本机安装PHP环境,遇到一个奇粑问题,本地安装的php5.2.php5.3.php5.4都需要做常规设置,即可正常使用.安装php5.5.php5.6时php_curl按各种方法进行配制,都无法 ...
- python运维开发(六)----模块续
内容目录 反射 模块 os模块 sys模块 md5加密模块 re正则匹配模块 configparse模块 xml模块 shutil模块 subprocess模块 反射 利用字符串的形式去对象(模块)中 ...
- CSS自学笔记(12):CSS3文字特效
在CSS3中新增了多个文本属性,同样有了这些属性我们在进行问题特效处理时,就尽可能少的用到其他软件去制作特效文字了. 在以前使用CSS进行web开发的时候,必须使用计算机上安装好的字体,如果有些用户的 ...