关于这个问题更为详细的阐述存在于http://heikezhi.com/2011/04/18/jquery-events-stop-misusing-return-false/,这里我分享一下我遇到的问题
今天在做图片分享的相册中的描述修改时遇到一个问题,就是点击链接中的一个div后进行修改链接的操作,但每次点击之后链接都会跳转,用return false居然不行,原型如下: return <wbr>false, <wbr>preventDefault <wbr>,和 <wbr>stopPropagation html代码如下: <li> <a href='album-{albumid}'> <img width='100' height='100' src='/model/album/{albumid}/{cover}'/> <div class='picnum'>{picnum}</div> <form class='description_input'> <input name='description_new' class='description_new'/> </form> <div albumid='{albumid}' class='description'>{description}</div> <a> </li> js代码如下: (function(){ var album = j('.album')[0]; var od; //修改之前的description album = j(album); album.addEvent('click',clickhandler); function clickhandler(e){ var description,des_form,dn; var e = window.event || e; var target = e.target || e.srcElement; if(target.className == 'description'){ od = target.innerHTML; j(target).attr('display','none'); des_form = target.previousSibling; // for(var name in target) console.log(name); // console.log(des_form.tagName); des_form.style.display = 'block'; dn = des_form.description_new; dn.focus(); dn.value = od; // console.log(description); j(dn).addEvent('blur',restore); return false; //阻止链接的跳转 } } function restore(e){ var description,dn,parent; // console.log('restore'); parent = this.parentNode; description = parent.nextSibling; dn = parent.description_new; description.innerHTML = dn.value; parent.style.display = 'none'; description.style.display = 'block'; j(this).removeEvent('blur',restore); if(od != dn.value){ j.ajax({ type:'POST', url:'/controller/album/modifydescription.php', header:{ "Content-Type":"application/x-www-form-urlencoded" }, data:'albumid='+description.getAttribute('albumid')+'&description='+dn.value, success:function(text){ console.log(text); } }); } } })(); 使用return false会跳转,而使用e.preventDefault()则不会跳转 这让我很是不解,照理说return false会做三件事: event.preventDefault(); event.stopPropagation(); 停止回调函数执行并立即返回 可是为什么只单单preventDefault就可以完成而return false却不行呢,当然,只是在chrome中,在IE中都不行
|