“javascript:void(0);”vs“return false”vs“preventDefault()”
当我想要一些链接不做任何事情,但只响应JavaScript的动作是什么是避免链接滚动到页面的顶部边缘的最佳方式?
我知道这样做的几种方式,他们似乎都工作得很好:
<a href="javascript:void(0)">Hello</a>
要么
<a id="hello" href="#">Hello</a> <script type="text/javascript> $(document).ready(function() { $("#toto").click(function(){ //... return false; }); }); </script>
乃至 :
<a id="hello" href="#">Hello</a> <script type="text/javascript> $(document).ready(function() { $("#toto").click(function(event){ event.preventDefault(); //... }); }); </script>
你有什么偏好? 为什么? 在哪些条件下?
PS:当然,上面的例子假设你正在使用jquery,但是有相当于mootools或原型。
捆绑:
-
javascript:
url是一个可以随时避免的恐怖; - 内联事件处理程序的属性也不是很好,但可以进行一些快速开发/testing;
- 从脚本绑定,留下标记干净,通常被认为是一个最佳做法。 jQuery鼓励这一点,但没有理由不能在任何库或普通的JS中做到这一点。
对策:
- 在jQuery中,
return false
意味着preventDefault
和stopPropagation
,所以如果你关心接收事件通知的父元素,意思是不同的; - jQuery隐藏它在这里,但通常IE(
returnValue
/cancelBubble
)中cancelBubble
/stopPropagation
必须拼写不同。
然而:
- 你有一个不是链接的链接。 它没有链接到任何地方; 这是一个行动。
<a>
并不是真正的理想标记。 如果有人试图中途点击它,或者将其添加到书签或链接的其他任何可供性,它将会出错。 - 对于实际上指向某些内容的情况,例如打开/closures页面上的另一个元素时,将链接设置为指向
#thatelementsid
并使用不显眼的脚本从链接名称中获取元素ID。 您也可以在文档加载中嗅探location.hash
.hash以打开该元素,以便该链接在其他上下文中变得有用。 - 否则,对于纯粹是动作的东西,最好将其标记为一个:
<input type="button">
或<button type="button">
。 如果需要,可以使用CSS来devise它的样式,而不是button。 - 但是,在IE和Firefox中,你不能完全摆脱button样式的某些方面。 这通常不是很重要,但是如果你真的需要绝对的视觉控制的话,一个妥协就是用
<span>
代替。 您可以添加一个tabindex
属性,使其可以在大多数浏览器中进行键盘访问,尽pipe这并不是真正标准化的。 您也可以检测按键,如Space或Enter来激活。 这是一种令人不满意的,但仍然相当受欢迎(所以,这是这样的)。 - 另一种可能性是
<input type="image">
。 这具有完全的视觉控制button的可访问性优势,但只有纯图像button。
我能想到使用javascript:void(0)
的唯一优点是即使是最老的浏览器也会支持它。 也就是说,我会用你提到的其他不显眼的方法之一:
- 对于大多数用途,
event.preventDefault()
和return false
可以互换使用。 -
event.preventDefault()
将防止页面重新加载,但会允许点击事件冒泡到父级。 如果您想停止冒泡,可以将其与event.stopPropagation
结合使用。 -
return false
将另外停止事件冒泡到父母。
我在上面的第一点说'可交换',因为我们大部分时间不关心一个事件是否起泡给父母。 但是,我们什么时候需要一些微调,我们应该考虑第二点和第三点。
考虑下面的例子:
<div>Here is some text <a href="www.google.com">Click!</a></div> $("a").click(function(e) { e.preventDefault(); }); $("div").click(function() { $(this).css("border", "1px solid red"); });
点击锚点将阻止事件的默认动作被触发,所以浏览器将不会redirect到www.google.com。 然而,这个事件仍然会“冒泡”,导致div的点击事件触发,这会在它周围增加一个边框。 添加e.stopPropagation()
或只 return false
,div的点击事件不会触发。 你可以在这里搞砸了: http : //jsfiddle.net/cMKsN/1/
我喜欢在链接中使用href="javascript:void(0)"
,因为#
意味着跳转到页面顶部,如果由于某种原因您的jQuery事件无法加载,可能会发生这种情况,例如jQuery无法加载。
我也使用event.preventDefault();
因为即使在返回false之前遇到错误,它也不会跟随链接。 例如:
HTML:
<a id="link" href="http://www.google.com">Test</a>
jQuery示例1:
$("#link").click( function(){ alert("Hi"); invalidCode(); return false; } );
jQuery示例2:
$("#link").click( function(event){ event.preventDefault(); alert("Hi"); invalidCode(); return false; } );
由于invalidCode();
会抛出一个错误return false
永远不会到达,如果使用jQuery示例1,用户将被redirect到谷歌,而在jQuery示例2中,他不会。
我倾向于使用return false
,因为这样可以让用户select是否继续该操作,例如在quirksmode中显示的:
http://www.quirksmode.org/js/events_early.html#default
这很简单,它是旧的,但它运行良好,跨浏览器,无论JavaScript的版本。
event.preventDefault()
并return false;
是一件事 – 它们指示浏览器不要处理事件的默认动作(在这种情况下,导航到被点击的定位标记的href)。 href=javascript:
和其他stream派是别的 – 他们导致默认的行动是“什么都不做”。
这是一个风格问题。 你想在onclick上做所有的工作,还是希望能够在onclick和href中进行操作,并依靠浏览器的function来调整两者之间的关系?
我认为我也看到了javascript :; 但是这主要是关于可访问性的(除了javascript:void(0);),只是一个小的修正不是javascript:void(0)但是javascript:void(0); 这意味着什么也不做,就像返回false一样。 虽然不确定如果javascript:返回false; 也是一样..
我总是使用,并会build议使用javascript:void(0); 有几个原因,当然,我认为是愚蠢的。
1)我使用它是因为上面提到的同一个人。href =“#”是不合适的,因为它可能表明到顶部,甚至在这种情况下'#top'将更适合这种情况。 但是,这也可能会触发代码中的其他内容,以便使用#(哈希),所以另一个原因是避免与可能使用#的其他JavaScript冲突。 我倾向于寻找这个例子时,使用插件,并立即将其replace.. href ='#'到href ='javascript:void(0);' 或href ='javascript :;'
2.)如果我想重新使用一组特定的Anchor标记的function,我可以用任何属性的select器调用它,而不必担心检测点击事件,并防止默认的行为,我甚至不考虑这是一个发展偏好。
3.)在大多数情况下,如果你正在使用javascript:void(0); 试图做一个链接,不作为旧的href = rel = nofollow,因此它避免索引作为行动的链接。 我不太确定这一点,因为我听说爬虫和机器人现在甚至可以读取Flash,所以如果他们可以阅读JavaScript链接,不会感到惊讶
4.)从2)引用你可以针对一个类似的而忘记通过使用href =“javascript:void(0);”来防止点击事件的默认行为 然后在jQuery函数中直接从select器中定位类。
jQuery(function($) { //from the rel $('a[rel="-your-rel-id"]') ... off('click').on('click',function() //from the class $('a.-the-class') ... off('click').on('click',function() //from the id $('a#-the-id').off('click').on('click',function() { --do something with this link }); });
我总是比较自在地使用class级
$(A# – 您-ID).hasClass(-yourclass-)
或任何其他有趣的组合,并影响很多链接..所以我真的不会build议使用A作为一个select器..
通常我在这里看到的build议是这样的:
jQuery(function($) { //from the rel $('a[rel="-your-rel-id"]').on('click',function(event) //do something //prevent the click as is passed to the function as an event event.preventDefault(); }); });
Dreamweaver默认使用了一个很好的小窍门,我已经开始使用了。
<a href='javascript:;'></a>
这是小的,它不旅行和锚定,它是图书馆不可知论者。
我宁愿不把JavaScript放入href
因为这不是它的意思。 我更喜欢类似的东西
<a href="#" onclick="return handler();">Link</a>