HTML5 Touchイベント：手に触れた単語を取得する

Question

私はモバイルユーザーのために自分のウェブサイトのための機能を構築しています。 私はこの機能を望みます： ユーザーが単語に触れると、その定義がポップアップウィンドウに表示されます。

私はHTML5のタッチAPIを見つけました。 しかし、その言葉に触れる方法を理解できませんでした。 何かヒント？

Answer 1

Range APIとその便利なgetBoundingClientRectメソッドのおかげで、それを達成することができます。
実際、このメソッドではtextNodeの位置を取得できますが、通常は要素の位置のみを取得できます。

私たちがしなければならないことは、クリックされた元のtextNodeを取り出し、その内容を単語数と同じ数のtextNodesに分割し、必要なものを取得することです。

document.onclick = function(e){ console.log(getWord(e));}; 
 
// didn't really test with touch device yet, but should be about the same... 
 
document.ontouchstart = function(e){ console.log(getWord(e.touches[0]));}; 
 

 
function getWord(e) { 
 
    // FF gives us a shortcut 
 
    var target = e.explicitOriginalTarget || e.target, 
 
    // We will use this to get the positions of our textNodes 
 
    range = document.createRange(), 
 
    rect, i; 
 
    // so first let's get the textNode that was clicked 
 
    if (target.nodeType !== 3) { 
 
    var children = target.childNodes; 
 
    i = 0; 
 
    while (i < children.length) { 
 
     range.selectNode(children[i]); 
 
     rect = range.getBoundingClientRect(); 
 
     if (rect.left <= e.clientX && rect.right >= e.clientX && 
 
     rect.top <= e.clientY && rect.bottom >= e.clientY) { 
 
     target = children[i]; 
 
     break; 
 
     } 
 
     i++; 
 
    } 
 
    } 
 
    if (target.nodeType !== 3) { 
 
    return '[not a textNode]'; 
 
    } 
 
    // Now, let's split its content to words 
 
    var words = target.nodeValue.split(' '), 
 
    textNode, newText; 
 
    i = 0; 
 
    while (i < words.length) { 
 
    // create a new textNode with only this word 
 
    textNode = document.createTextNode((i ? ' ' : '') + words[i]); 
 
    newText = words.slice(i + 1); 
 
    // update the original node's text 
 
    target.nodeValue = newText.length ? (' ' + newText.join(' ')) : ''; 
 
    // insert our new textNode 
 
    target.parentNode.insertBefore(textNode, target); 
 
    // get its position 
 
    range.selectNode(textNode); 
 
    rect = range.getBoundingClientRect(); 
 
    // if it is the one 
 
    if (rect.left <= e.clientX && rect.right >= e.clientX && 
 
     rect.top <= e.clientY && rect.bottom >= e.clientY) { 
 
     return words[i]; 
 
    } 
 
    i++; 
 
    } 
 
};

<p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac fermentum ipsum, in efficitur felis. Nam fringilla semper lectus, pretium luctus tortor. Pellentesque vel aliquet orci. Quisque at accumsan felis. Phasellus a ligula congue, viverra tellus 
 
    sit amet, consequat arcu. Mauris et congue diam, eget vehicula ante. Curabitur varius augue eget augue posuere, ut tincidunt purus sodales. Suspendisse luctus fermentum justo, sed scelerisque ipsum dignissim nec. 
 
</p> 
 
<p> 
 
    Suspendisse sed dui elit. Vivamus laoreet ipsum ut metus finibus, eu ultrices lorem bibendum. Fusce ante nibh, egestas nec neque id, semper volutpat orci. Donec a porta nunc. Sed interdum hendrerit mauris. Donec sed semper eros. Integer rhoncus diam quis 
 
    augue ornare consequat. Sed eleifend congue ante quis malesuada. Maecenas et purus venenatis arcu malesuada condimentum id quis nunc. Integer non suscipit sapien, id iaculis mi. 
 
</p> 
 
<p> 
 
    Mauris cursus mauris vitae nulla tempor lacinia. Quisque tristique ullamcorper magna et consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus faucibus sit amet enim non sollicitudin. Aliquam malesuada, 
 
    massa hendrerit condimentum pulvinar, ex est finibus massa, at efficitur velit est eu dolor. Pellentesque facilisis ligula hendrerit lacus efficitur venenatis. Ut pretium turpis quis laoreet mattis. Quisque tempor ornare maximus. Nunc augue urna, egestas 
 
    non lectus at, fringilla pharetra nisl. Pellentesque ac quam cursus, volutpat libero eget, ultricies dolor. Donec eleifend iaculis dui dignissim pulvinar. Cras semper vehicula augue, ut ultricies arcu consectetur ut. Mauris congue turpis justo, ac feugiat 
 
    dolor semper nec. Donec id augue posuere, efficitur nunc in, hendrerit est. Morbi eget pretium odio. 
 
</p> 
 
<p> 
 
    Morbi at volutpat nulla. Pellentesque elementum blandit imperdiet. Morbi id lacinia quam. Sed sed accumsan mauris. Donec nulla mi, rutrum id blandit id, hendrerit at turpis. Integer ante orci, venenatis a felis id, suscipit dignissim metus. Pellentesque 
 
    dictum, lectus aliquam facilisis mattis, nisi est porttitor nulla, et semper enim ante quis ex. Quisque ante magna, viverra et ante quis, fringilla tempor mauris. Phasellus posuere nulla in eleifend egestas. Proin augue arcu, semper quis metus sit amet, 
 
    placerat porta lorem. Integer tempus mi at faucibus posuere. Vestibulum ut malesuada turpis. In malesuada eros nisl, eget laoreet velit auctor vitae. 
 
</p> 
 
<p> 
 
    Aliquam maximus varius metus vel congue. Ut tristique risus metus, in tempor leo tempor laoreet. Donec scelerisque ipsum vitae nisi facilisis eleifend. Vivamus condimentum risus non lectus bibendum elementum. Cras vitae malesuada lorem. Curabitur et posuere 
 
    massa, ut luctus mi. Sed et enim nec nisl sollicitudin semper. Donec eget consectetur leo, a faucibus nulla. Nam accumsan hendrerit neque, ultrices aliquam ex auctor id. Nunc euismod faucibus ullamcorper. Sed ornare interdum congue. Quisque eget erat 
 
    erat. Morbi congue orci vitae porttitor semper. 
 
</p>

Answer 2

これはややこしいでしょう。あなたが文章の中で触れられた特定の単語を知りたければ、別のスパンに単語を保存し、すべてのスパンにタッチイベントを登録して、テキストコンテンツをタッチして取得する必要があります。 イベントリスナーの場合はhttps://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener、タッチイベントをキャプチャする場合は

https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Using_Touch_Eventsを参照してください。