jquery的delegate属性

之前发现豆瓣首页导航条上“我的账户”和“更多”两个链接点击的时候不会跳转,但在“我的豆瓣”页面上点击“我的账户”的时候却又会跳转,一直弄不明白是什么原因。自己一直用的是直接写成<a href="#"></a>这样的形式,明知道用户体验很不好,却也一直没积极的找解决办法。如果这个链接不在顶部,那么点击的时候页面虽然不会重新加载,但却会跳到顶部,让人没有防备,带来糟糕的用户体验。而当页面在顶部的时候,比如就像豆瓣这样,虽然不会跳转,但会在链接中加入一个"#",可能很多人都不会在意这一点,但少数敏感的用户还是会注意到,本来点击“我的账户”的时候,我的内心期待只是展开“我的账户”而已,我的全部注意力都在浏览器的右上角,但左上角的链接后面却突然增加了一个"#"号来分散我的注意力,自然会使用户的满意度降低。 今天无意间搜索进入了星光编程社区,正好看到了这个问题,得到了这一问题的最佳解决方案。 很多朋友的回答都是使用<a href="javascript:void(0);"></a>来代替<a href="#"></a>来改善这一问题,这样虽然解决了跳转和链接中添加#号的问题,但书写起来过于麻烦,费时费力。最优的解决方案是href提供跳转同时js劫持跳转,用jquery的delegate(事件委托)指定凡是带上指定类的链接都禁止跳转,这样好处是,当js还没加载时,用户可以使用降级版本,而js加载后可以使用高级版本。豆瓣也正是采取的这一方法,如下所示: var nav=$("#db-global-nav");var more=nav.find(".bn-more");nav.delegate(".bn-more, .top-nav-reminder .lnk-remind","click",function(f){f.preventDefault().... delegate的语法是:
$(selector).delegate(childSelector,event,data,function)
选中导航条下的更多、提醒和我的账户禁止跳转。而前面提到的在我的豆瓣页面又会跳转应该是豆瓣用户体验上的一个bug吧。
posted @ 2013-03-05 18:24  echoHUST  阅读(284)  评论(0编辑  收藏  举报