बिंदु से डीओएम पाठ नोड प्राप्त करें?

जैसे कि मैं document.elementFromPoint या document.getElementFromPoint के साथ किसी बिंदु से तत्व प्राप्त कर सकता हूं, क्या किसी बिंदु को टेक्स्ट नोड पर होने पर किसी भी तरह टेक्स्ट नोड प्राप्त करना संभव है? मुझे लगता है कि कम से कम मुझे पाठ नोड की स्थिति और आकार मिल सकता है, तो मैं समझ सकता हूं कि उनमें से कौन सा बिंदु है। लेकिन फिर डोम नोड्स में स्थिति गुण नहीं हैं। क्या यह सब करना संभव है?बिंदु से डीओएम पाठ नोड प्राप्त करें?

स्रोत

2012-11-28 Juan

यहाँ एक कार्यान्वयन है कि सभी वर्तमान ब्राउज़रों में काम करता है: https://github.com/nuxodin/q1/blob/master/q1.dom.js

document.betaNodeFromPoint = function(x, y){ 
    var el = document.elementFromPoint(x, y); 
    var nodes = el.childNodes; 
    for (var i = 0, n; n = nodes[i++];) { 
     if (n.nodeType === 3) { 
      var r = document.createRange(); 
      r.selectNode(n); 
      var rects = r.getClientRects(); 
      for (var j = 0, rect; rect = rects[j++];) { 
       if (x > rect.left && x < rect.right && y > rect.top && y < rect.bottom) { 
        return n; 
       } 
      } 
     } 
    } 
    return el; 
};

स्रोत

2012-12-09 17:28:31

बस बढ़िया, मैंने अभी इस सटीक फ़ंक्शन को लिखना समाप्त कर दिया है ~ ओह ठीक है :) 'createRange' भाग को समझने के लिए मेरा अपवित्र है, मुझे इसे मारने से पहले कुछ मिनट लग गए: पी –

धन्यवाद! आप सबसे अच्छे हैं :) –

आप यह देखने के लिए element.nodeName का उपयोग कर सकते हैं कि यह एक टेक्स्ट नोड है, और उसके बाद element.nodeValue इसके मूल्य के लिए।

स्रोत

2012-11-28 03:18:05 Ben

मुझे लगता है कि 'getElementFromPoint' केवल वापसी करें एस तत्व नोड्स। –

आह, हाँ, आप सही हैं: https://developer.mozilla.org/en-US/docs/DOM/document.elementFromPoint कहता है कि 'तत्व तत्व तत्व होना चाहिए' (जो कि एक अलग XML प्रकार है टेक्स्ट ऑब्जेक्ट) – Ben

इस दस्तावेज़ (fiddle) को ध्यान में रखते:

<html> 
<body> 
    some text here 
    <p id="para1">lalala</p> 
    bla bla 
</body> 
</html>

और यह कोड:

$(document).on('click', function(evt) { 
    var elem = document.elementFromPoint(evt.clientX, evt.clientY); 
    console.log(elem); 
});

जब आप <p> टैग के अंदर कहीं भी क्लिक करें, टैग तत्व ही लॉग होता है। हालांकि, जब आसपास के पाठ पर क्लिक किया जाता है, तो <body> वापस कर दिया जाता है क्योंकि टेक्स्ट खंडों को तत्व नहीं माना जाता है।

निष्कर्ष

यह है कि तुम क्या elementFromPoint() साथ चाहते हैं और क्योंकि पाठ टुकड़े क्लिक ईवेंट प्राप्त नहीं है, मैं यह बिल्कुल संभव है नहीं लगता कि पूरा करने के लिए संभव नहीं है।

स्रोत

2012-11-28 03:37:57

Firefox के लिए, आप document.caretPositionFromPoint

का उपयोग करना चाहिए यहाँ एक greap डेमो है: https://developer.mozilla.org/en-US/docs/Web/API/document.caretPositionFromPoint

क्रोम और एज के लिए, document.caretRangeFromPoint(x,y)

स्रोत

2014-07-02 12:55:17

हां, यह फ़ायरफ़ॉक्स विशिष्ट फ़ंक्शन है :-( – Michael

@ माइकल याहू अन्य ब्राउज़रों के लिए, document.caretRangeFromPoint (x, y) आज़माएं –

बिंदु से डीओएम पाठ नोड प्राप्त करें?

उत्तर

संबंधित मुद्दे