jquery - 使用 jquery 防止 div 内所有链接的默认设置

Question

我有一个看起来像这样的 div:

<div id="blah"> <a href="#" >hello</a>   <a href="#"> world</a></div>

我想使用 e.preventDefault() 禁用此 div 内的所有链接；

如何使用 jquery 选择 div id="blah"内的所有 href 标签？

Answer 1

以下内容将为您提供所有<a>里面的元素 <div> id 等等有一个 href已定义属性。

$('#blah a[href]').click(function(e) { e.preventDefault(); });

没有 jQuery，类似下面的内容(我显然已经在 jQuery 世界中生活太久了，因为我最初在普通 JavaScript 中使用了 PreventDefault。不幸的是，不是跨浏览器:( ) 我确实在 Firefox、IE 和 Chrome 中进行了测试

var anchors = document.getElementById('blah').getElementsByTagName('a');

for(var i=0; i < anchors.length; i++) {
    addEvent(anchors[i], 'click', preventDefault);
}

function preventDefault(e) {
    e = e || window.event;
   (e.preventDefault)? 
       e.preventDefault() : e.returnValue = false;
}

function addEvent(obj, evType, fn){ 
   if (obj.addEventListener){ 
       obj.addEventListener(evType, fn, false); 
       return true; 
   } 
   else if (obj.attachEvent){ 
       var r = obj.attachEvent("on"+evType, fn); 
       return r; 
 } else { 
       return false; 
 } 
}

出于兴趣，这就是 jQuery实现preventDefault()

// jQuery.Event is based on DOM3 Events as specified by the ECMAScript Language Binding
// http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html
jQuery.Event.prototype = {
    preventDefault: function() {
        this.isDefaultPrevented = returnTrue;

        var e = this.originalEvent;
        if( !e )
            return;
        // if preventDefault exists run it on the original event
        if (e.preventDefault)
            e.preventDefault();
        // otherwise set the returnValue property of the original event to false (IE)
        e.returnValue = false;
    }