使用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

以下内容将使用id blah 获取所有已定义属性的<a>元素.<div>href

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

没有jQuery,类似于以下内容(我显然生活在jQuery世界中的时间太长,因为我最初在vanilla 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;
    }

Answer 2

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

非jQuery(我没有测试过这个):

    var addEvent = (function() {
    function addEventIE(el, ev, fn) {
        return el.attachEvent('on' + ev, function(e) {
        return fn.call(el, e);
        });
    }
    function addEventW3C(el, ev, fn) {
        return el.addEventListener(ev, fn, false);
    }
    return window.addEventListener ? addEventW3C:addEventIE;
    })();

var anchors = document.getElementById('blah').getElementsByTagName('a');
for ( var i = anchors.length; i--; ) {
    addEvent( anchors[i], 'click', function(e) { 
        e = e || window.event;
        if ( e.preventDefault ) e.preventDefault()
        else e.returnValue = false
    });
}