实现a标签中的各种点击(onclick)事件的方法

我们常用的在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-10-10 14:53:51

实现a标签中的各种点击(onclick)事件的方法的相关文章

JavaScript中,有三种常用的绑定事件的方法

要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数. 一. 在DOM元素中直接绑定 这里的DOM元素,可以理解为HTML标签.JavaScript支持在标签中直接绑定事件,语法为:    onXXX="JavaScript Code" 其中:

手机上怎么去掉a 标签中的img点击时的阴影?

a {  -webkit-tap-highlight-color: transparent;  -webkit-touch-callout: none;  -webkit-user-select: none;} 一般a标签被按住时会出现这个阴影 所以解决方法也是针对a标签 a { -webkit-tap-highlight-color: rgba(0,0,0,0); }

js和jquery中嵌套(点击)事件中,防止点击多次父事件,子事件执行多次

1 $("#a").bind("click",function(){ 2 alert('a'); 3 $("#b").bind("click",function(){ 4 alert('b'); 5 }) : 6 }); 7 /*这样连续点击a按钮后,在点击一次b按钮,会重复a按钮点击的次数,我给的解释是,按钮a点击一次,会监听b点击的事件,这样点击多次后,会相应地监听b多次事件.所以,如果只是想执 行最后一次b的点击事件,应

花了一早上的时间(4个多小时)总结出来的教训:textarea标签中的文本内容不能够通过serialize()方法得到

1.先看一下完善的代码,也就是最终的答案! 2.以上结果是在几个小时的折磨之后才得出来的,程序猿不容易啊!可这个期间会经过很多弯路,请看下面: 2.1一开始是这样:textarea标签在form表单内,直接用Jquery中的serialize()序列化: 2.2可是结果很悲催啊,当我新添加一条新闻时,我明明填写了新闻标题和内容,为什么提示为空呢?难道被Web黑洞吸收了? 我不相信,抱着坚定的信心寻找原因: *********************************************

解决重复点击onClick事件,多次触发问题

在配置文件中加入一下代码,即可解决全局的onClick重复点击.此方法是重写ngClick事件,可以保护多次点击 app.config(['$provide', function ($provide) { $provide.decorator('ngClickDirective',['$delegate','$timeout', function ($delegate,$timeout) { var original = $delegate[0].compile; var delay = 500

JavaScript例子1-给网页中所有<p>元素添加onclick事件

1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title></title> 7 <script type="text/javascript"> 8 window.onload = function() { 9 var items = document.getElementsByTagName(&

javascript中常用的事件绑定方法

我们要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数. 一. 在DOM元素中直接绑定 这里的DOM元素,可以理解为HTML标签.JavaScript支持在标签中直接绑定事件,语法为:    onXXX="JavaScript Code" 其中

标签文档添加双击标题自动关闭事件

布局控件"WeifenLuo.WinFormsUI.Docking"是一个非常棒的开源控件,用过的人都深有体会,该控件之强大.美观.不亚于商业控件.而且控件使用也是比较简单的.本文介绍如何给 WeifenLuo.WinFormsUI.Docking 控件的标签文档添加双击标题自动关闭事件,方法很简单,只需稍稍修改 WeifenLuo.WinFormsUI.Docking 的代码即可. 在DockPaneStripBase的WndProc方法里,对于左键双击消息重新作了处理,我们先找到这

关于在&quot;a&quot;标签中添加点击事件的一些问题

昨天做修改页面跳转时遇到一个问题,如果a标签的"href"属性为空的话,比如这样<a href="" onclick="roleupdate()">修改</a>,这时当我点击修改链接时并没有给我跳到对应修改页面,而是只在本页面进行了刷新操作:如果写成<input type="button" onclick="roledelete()" value="修改"&