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事件触发吧


posted @ 2014-12-05 15:55  cuker919  阅读(200)  评论(0编辑  收藏  举报