Hovering over a colored fragment of text using the textrange object triggers a mouseover event

Question

Hovering over a colored fragment of text using the textrange object triggers a mouseover event

Is it possible to highlight a specific fragment of text using text range or another approach? I have a text block, for example:

<div id="test">abcdefghij</div>

I have successfully used text range to highlight text in yellow color (as seen in an example on SO). Is it possible to add an event listener for mouseover on the highlighted text? I would like to trigger something when the user hovers over 'cdefg'. Here is a working example on jsfiddle:

http://jsfiddle.net/8mdX4/673/

I welcome any ideas and suggestions.

Best regards.

Edit:

After posting the question, I would like to share my approach. I am using the focusNode property of the selection because commonAncestorContainer retrieves the container of all nodes, not just the currently selected node. Here is a demonstration: http://jsfiddle.net/zono/Q3ptC/2/ When hovering over the yellow text, a tooltip (content of title property) is displayed.

javascript textrange

Answer 1

Answer №1

It appears that your code heavily relies on document.execCommand to style elements, potentially resulting in the creation of <span> elements, although this behavior varies across different browsers. Unfortunately, there is a lack of event management command associated with execCommand, making it challenging to assign specific events to these dynamically created elements.

Instead of utilizing execCommand extensively, a more flexible approach could involve utilizing window.getSelection to manually create elements and then add events as needed.

Another strategy would be to implement window.getSelection() after executing execCommand to identify the newly created element, locate its parent node, and attach events accordingly:

/*Code snippet to handle selection event*/
var sel = window.getSelection();
if (sel.rangeCount) {
    parent = sel.getRangeAt(0).commonAncestorContainer
    if (parent.nodeType != 1) {
        parent = parent.parentNode
    }

    parent.onclick = function() {
        alert("Look at this!");
    }
}

You can consider integrating this approach into your code for more efficient event handling. For a practical demonstration, refer to the updated version of your code in this JSFiddle link.

Answer 2

It appears that your code heavily relies on document.execCommand to style elements, potentially resulting in the creation of <span> elements, although this behavior varies across different browsers. Unfortunately, there is a lack of event management command associated with execCommand, making it challenging to assign specific events to these dynamically created elements.

Instead of utilizing execCommand extensively, a more flexible approach could involve utilizing window.getSelection to manually create elements and then add events as needed.

Another strategy would be to implement window.getSelection() after executing execCommand to identify the newly created element, locate its parent node, and attach events accordingly:

/*Code snippet to handle selection event*/
var sel = window.getSelection();
if (sel.rangeCount) {
    parent = sel.getRangeAt(0).commonAncestorContainer
    if (parent.nodeType != 1) {
        parent = parent.parentNode
    }

    parent.onclick = function() {
        alert("Look at this!");
    }
}

You can consider integrating this approach into your code for more efficient event handling. For a practical demonstration, refer to the updated version of your code in this JSFiddle link.

Hovering over a colored fragment of text using the textrange object triggers a mouseover event

Answer №1

Similar questions

Tips for displaying data by using the append() function when the page is scrolled to the bottom

Transferring a Multidimensional Javascript Array to a PHP Page

Create a series of vertical lines using jQuery

What is the best way to display user input within a paragraph using React?

Exploring Firestore: Tips for Locating an Email Across Multiple Documents

What is the best method to retrieve child elements from a class list object?

What are some techniques for animating SVG images?

Perform the function prior to making any adjustments to the viewmodel attributes

Failure to recognize AJAX content in .ready function

Coloring a table in vue.js based on performance rankings

The download attribute does not seem to function properly when used within the <a></a> tag in ReactJS

The function Server.listeners is not recognized by the system

Is there a way to utilize a MongoDB plugin to retrieve results directly as a return value instead of within a callback function?

The v-data-table is unable to fetch the user list information from the API using Axios

In a React/Redux component, there is a requirement to automatically fill a specified number of fields based on the selection made

Using NodeJS to convert a Base64 string into a JPEG image with the help of either NodeJS or

Problem with <meta> tag occurring when initial-scale is adjusted

Ways to choose an option from a drop-down menu without the select tag using Selenium

Accessing JSON data from a URL for use within a specific context

Is Angular File API Support Compatible with HTML5?