éviter par défaut pour tous les liens à l'intérieur d'un div en utilisant jquery

Question

J'ai un div qui ressemble à:

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

Je veux désactiver tous les liens à l'intérieur de cette div en utilisant e.preventDefault();

Comment puis-je sélectionner toutes les balises href qui se trouvent dans le div id = "blah" en utilisant jquery?

Answer 1

Vous trouverez ci-dessous tous les éléments <a> à l'intérieur de <div> avec id blah ayant un attribut href défini.

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

sans jQuery, quelque chose comme le suivant (je l'ai évidemment vécu dans le monde jQuery beaucoup trop longtemps que j'avais initialement preventDefault dans le JavaScript vanille. Malheureusement, cross-browser :() Je l'ai tester ce dans Firefox, IE et 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; 
} 
} 

Pour l'intérêt, voici comment jQuery implémente 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(); }); 

non jQuery (je n'ai pas testé cela):

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 
    }); 
}