Привязка события к текстовому узлу

Question

Вот мой HTML. Мне нужно привязать событие щелчка к «someText»

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

"someText" может быть любой строкой текста

Answer 1

Используйте jQuery, чтобы обернуть текстовый узел в <span>, поместите щелчок на него.

Попробуйте: 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

Метод .contents() возвращает все дочерние узлы, включая текстовые узлы.Таким образом, вы берете первого потомка, оборачиваете его, переходите к его родителю (который теперь является промежутком) и добавляете щелчок.*

http://api.jquery.com/parent/

Answer 2

Hacky way без каких-либо изменений html разметка:

1. Добавить contenteditable атрибут к контейнеру.
2. При нажатии на выбранный узел через document.getSelection() и проверь.
3. Если выбранный текстовый узел является именно тем узлом, делайте что хотите.
4. Сброс выбора.

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: это скорее пища для размышлений, чем реальная рекомендация.

Answer 3

После небольшой неразберихи я нашел немного лучшее решение для Патрика. В этой ситуации он может выбирать узлы после ссылки, что делает его более универсальным для использования. Наверное, лучше разместить здесь:)

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

Answer 4

Оберните его в теги <a> или <div> и назначьте событие click для этого элемента.

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

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