Evénement de liaison au noeud de texte

Question

Voici mon code HTML. Je dois lier un événement click pour « someText »

<div id="container"> 
    someText <a href="#">A link</a> 
</div> 

« de someText » pourrait être une chaîne de texte

Answer 1

Après un peu de déconner, j'ai trouvé une solution un peu mieux à Patrick. Il peut sélectionner des nœuds après le lien dans cette situation, ce qui le rend plus universellement utilisable. Probablement mieux l'afficher ici :)

$('#container') 
.contents() 
.filter(function() { 
    return this.nodeType == Node.TEXT_NODE; 
}) 
.wrap('<span/>') 
.parent() 
.click(function(){ 
    alert($(this).text()); 
}); 

Answer 2

Soit envelopper dans <a> ou <div> balises et affecter l'événement de clic à cet élément.

<a href="#" id="sometext">someText</a> 

    $("#sometext").click(function() { 
     do stuff here... 
    }); 

Answer 3

Utilisez jQuery pour envelopper le nœud de texte avec un <span>, l'endroit le clic sur ce point.

Essayez-:http://jsfiddle.net/3F4p4/

$('#container').contents() // Get all child nodes (including text nodes) 
       .first()  // Grab the first one 
       .wrap('<span/>') // Wrap it with a span 
       .parent()   // Traverse up to the span 
       .click(function() { alert('hi'); });​​ // add the click to the span 

La méthode .contents() retourne tous les nœuds enfants, y compris les nœuds de texte. Donc, vous prenez le premier enfant, l'envelopper, traverser à son parent (qui est maintenant la durée), et ajouter le clic.

• http://api.jquery.com/contents/
• http://api.jquery.com/wrap/
• http://api.jquery.com/parent/

Answer 4

façon Hacky whithout tout changement de html balisage:

1. Ajouter contenteditable attribut à conteneur.
2. Cliquez sur le noeud sélectionné via document.getSelection() et vérifiez-le.
3. Si le nœud de texte sélectionné est le nœud même, faites ce que vous voulez.
4. Réinitialiser la sélection.

http://jsfiddle.net/quqtk8r6/2/

var el = document.getElementById("container") 
el.setAttribute("contenteditable", "true") 
el.style.cursor = "pointer" 
el.style.outline = "none" 
el.addEventListener("click", function() { 
    var selection = document.getSelection(), 
     node = selection.baseNode 

    selection.removeAllRanges() 
    if (node.nodeType == 3 && node.parentNode == el) { 
    alert("someText are clicked") 
    } 
}) 
el.addEventListener("keydown", function (event) { 
    event.preventDefault() 
    return false 
}) 

PS: Il est plus de nourriture pour la pensée plutôt que la recommandation réelle.