阻止事件默认行为的执行和获得触发事件的目标元素【转】

我们需要了解浏览器中关于事件对象有两个很重要的功能。阻止浏览器执行事件默认行为的ev.preventDefault()，和可以获得事件目标元素的ev.target.

比如说一个链接被点击了，但因为业务需要，我们并不想让浏览器打开新页面。这时候可以给这个链接加个点击事件监听，然后在回调函数中调用 preventDefault()方法即可。昂，就如下面这个例子，请看HTML：

<a class="prevent" href="http://smashingmagazine.com">Smashing, my dear!</a>
<a class="normal" href="http://smashingmagazine.com">Smashing, my dear!</a>

还有JavaScript：

var normal = document.querySelector('.normal'),
    prevent = document.querySelector('.prevent');

prevent.addEventListener('click', function(ev) {
  alert('fabulous, really!');
  ev.preventDefault();
}, false);

normal.addEventListener('click', function(ev) {
  alert('fabulous, really!');
}, false);

注意： document.querySelector() 是合理获取DOM元素的一种方式。和jQuery的 $() 差不多。 可以读读 W3C’s specification 和MDN的 explanatory code snippets 去了解。

如果点击.prevent链接，会弹出个对话框，点“确定”后啥事都没发生，呵～呵～，因为处理中有执行ev.preventDefault()，所以不会跳到 http://smashingmagazine.com。没有 preventDefault()的就会在弹对话框，且跳链接咯。不信你可以试一下嘛。