`
cuker919
  • 浏览: 88847 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

href="javascript:xxx(this);"和onclick="javascript:xxx(this);"的区别

 
阅读更多

href="javascript:xxx(this);"和onclick="javascript:xxx(this);"

一直以为这两种写法是等同的,今天在项目中使用时发现前者的this根本拿不到触发事件的A标签,而后者可以拿到

一般在做分页按钮时会用A标签来做,但是一般都会写<a href="#" onclick="turnPage(1,10)">之类的

href="#"会导致分页在跳转时页面先跳到当前页面顶部用户体验不好,所以一般推荐写成

<a href="javascript:void(0);" onclick="turnPage(1,10,this)">

甚至如果跳转的方法不需要拿到当前的A标签this的话,也可以直接写成

<a href="javascript:turnPage(1,10);" >



href='javascript:function()'和onclick能起到同样的效果,一般来说,如果要调用脚本还是在onclick事件里面写代码,而不推荐在href='javascript:function()' 这样的写法,因为 href 属性里面设置了js代码后,在某些浏览器下可能会引发其他不必要的事件。造成非预期效果。

而且 onclick事件会比 href属性先执行,所以会先触发 onclick 然后触发href,所以如果不想页面跳转,可以设置 onclick里面的js代码执行到最后返回一个false,这样 href 里面的东西就不会执行了。

在ajax应用程序中,多写着下面的这样 ,以表示这个链接不跳转,而执行一段js脚本。
<a href="javascript:void(0);" onclick="function()"></a>
或者 <a href="javascript:;" onclick="function()"></a>

void(0) 只是用来计算一个空值,其实也是什么事情都不做,而分号“;”则表示是一个空的js语句,这样就不会有任何其他跳转发生了,而且W3C标准不推荐在href里面执行javascript语句,所以还是用 onclick事件触发吧


分享到:
评论

相关推荐

    js使用小技巧

    Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode ...

    a标签href属性和onclick事件的比较介绍

    首先说一下, href属性 和 onclick事件 的执行顺序,当鼠标点击a标签的时候会先执行 onclick事件, 然后才是 href 属性下的动作(页面跳转,或 javascript 伪链接),如果不想执行href 属性下的动作执行,onclick ...

    [removed].href IE下跳转失效的解决方法

    代码如下: &lt;a&gt;GoNext&lt;/a&gt; $(“a”).click(function(){ [removed].href = “xxx.html”;...在onclick事件中加return false来阻止冒泡: 代码如下: $(“a”).click(function(){ [removed].href = “xxx.html”;

    javascript简单时间控件(小时,分,秒)

    使用说明: 首先把本控件包含到页面 &lt;script src=“XXX/setTime.js” type=“text/javascript”&gt; 控件调用函数:_SetTime(field) 例如 &lt;input name=“time” type=“text” onclick=“_SetTime(this)”/&gt;

    javascript实验报告(1).docx

    charset=utf-8" /&gt; 无标题文档&lt;/title&gt; &lt;/head&gt; &lt;script language="javascript"&gt; function y(){ alert("大家好,我是xxx,学号:xxxxx") } &lt;/script&gt; &lt;body &gt; &lt;input type="button" value="确定" onclick="y()" /&gt; ...

    关于JavaScript中事件绑定的方法总结

    最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看。 JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScript代码中直接绑定 3 绑定事件监听函数 ...

    ASP.NET程序中常用的三十三种代码.txt

     e.Item.Attributes.Add("onclick","this.style.backgroundColor=’#99cc00’;  this.style.color=’buttontext’;this.style.cursor=’default’;"); }  写在DataGrid的_ItemDataBound里 if (e.Item.ItemType...

    ASP.NET常用代码

    e.Item.Attributes.Add("onclick","this.style.backgroundColor='#99cc00';this.style.color='buttontext';this.style.cursor='default';"); } 写在DataGrid的_ItemDataBound里 if (e.Item.ItemType == ...

    计算机网络安全技术:在网页中加入javascript.pdf

    在网页中加入javascript 新建一个文件,后缀名为保存为xxx.js alert("可以调用"); test=function() { // 获取ID 为'key' 的元素,并判断内容是否会空 if(document.getElementById('key').value=='') { alert(' 空的...

    js调用后台、后台调用前台等方法总结

    javaScript函数中执行C#代码中的函数: 方法一:1、首先建立一个按钮,在后台将调用或处理的内容写入Button1_Click中; 代码如下: protected void Button1_Click(object sender, EventArgs e) { this.TextBox1.Text ...

    不同浏览器对回车提交表单的处理办法

    (注释1) 所以,如果要控制提交行为的话(比如,提交前检查必填项是否已填),可以在type=”submit”的“input”后添加Javascript“onXXX(比如onClick)”事件。而如果需要用异步交互来检测相关字段,则无效了。...

    freemarker总结

    注意:=和!=可以用于字符串,数值和日期来比较是否相等,但=和!=两边必须是相同类型的值,否则会产生错误,而且FreeMarker是精确比 较,"x","x ","X"是不等的.其它的运行符可以作用于数字和日期,但不能作用于字符串,大...

Global site tag (gtag.js) - Google Analytics