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事件触发吧
推荐阅读
-
了解javascript中let和var及const关键字的区别
-
浅谈href=#与href=javascript:void(0)的区别
-
Javascript中类式继承和原型式继承的实现方法和区别之处
-
jQuery中的read和JavaScript中的onload函数的区别
-
JavaScript中toLocaleString()和toString()的区别实例分析
-
有关javascript中Null和Undefined的区别讲解
-
javaScript中"=="和"==="的区别详解
-
JavaScript中.min.js和.js文件的区别讲解
-
故事形式讲解javaScript中创建对象和Java创建对象的区别
-
JavaScript中undefined和null的区别