关于在"a"标签中添加点击事件的一些问题
昨天做修改页面跳转时遇到一个问题,如果a标签的"href"属性为空的话,比如这样<a href="" onclick="roleupdate()">修改</a>,这时当我点击修改链接时并没有给我跳到对应修改页面,而是只在本页面进行了刷新操作;如果写成<input type="button" onclick="roledelete()" value="修改">,点击完全没有反应。后来和同事讨论后发现改为<a href="javascript:void(0)" onclick="roleupdate()">修改</a>,即在"href"属性中添加"javascript:void(0)"或者"#"即可以实现页面的跳转,所以个人认为"a"标签中的"href"属性值不应该为空。
为了便于大家学习,本人整理了几种在"a"标签中使用点击事件的方法,如下所示:
1. <a href="JavaScript:js_method();"</a>
这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行javascript语句
2. <a href="javascript:void(0);" onclick="js_method()"</a>
这种方法是很多网站最常用的方法,也是最周全的方法,onclick方法负责执行js函数,而void是一个操作符,void(0)返回undefined,地址不发生跳转。而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。
3.<a href="javascript:;" onclick="js_method()"</a>
这种方法跟2种类似,区别只是执行了一条空的js代码。
4.<a href="#" onclick="js_method()"</a>
这种方法也是网上很常见的代码,#是标签内置的一个方法,代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。
5.<a href="#" onclick="js_method();return false;"</a>
这种方法点击执行了js函数后return false,页面不发生跳转,执行后还是在页面的当前位置。
我看了下taobao的主页,他们采用的是第2种方法,而alibaba的主页是采用的第1种方法,和我们的区别是每个href里的javascript方法都用try、catch包围。
- 关于oracle数据库中直接修改表中数据点击小锁出现"these query results are not updateable"的问题
- jquery给某个标签如<button>等,添加点击事件,$("#XX").click(function(){ });
- 关于html 中a标签添加点击事件的方法总结
- 移动端点击a标签和img标签以及添加的js点击事件时的闪屏问题 解决方案
- 关于RelativeLayout、LinearLayout添加点击事件失灵的问题
- 关于在c#中创建用户控件后,winform应用程序在调用中无法通过点击用户控件的子控件为其自动添加事件代码的问题
- 关于a标签内的onclick事件只能点击一次的问题
- 【转】关于Android4.0 emulator-arm.exe-应用程序错误,内存不能为"read"问题解决方法
- 预防"提交"按钮的多次点击-onbeforeunload事件
- 关于linq to sql调用存储过程,出现"无法枚举查询结果多次"的问题
- 关于对话框上的按钮不响应点击事件的问题
- 给body标签和document.body都添加点击事件后仅Firefox弹出了两次
- 关于Android4.0 emulator-arm.exe-应用程序错误,内存不能为"read"问题解决方法
- 关于Javascript与表单结合时出现"对象不支持此属性或方法"的问题总结(不断更新中...)
- 关于Android4.0 emulator-arm.exe-应用程序错误,内存不能为"read"问题解决方法
- 为body标签和document.body都添加点击事件后仅Firefox弹出了两次
- 关于写ATL控件时对控件添加事件事 'IID__IXXXEvents' : undeclared identifier的问题解决方法
- 由"猫,老鼠和主人"引出的委托,事件及观察者模型问题
- 动态添加控件中关于事件的问题
- 关于"Google限制Python"事件我的看法