Strategies for avoiding text selection interference with onMouseMove event

Question

Strategies for avoiding text selection interference with onMouseMove event

I am in the process of adding a "resize handle" to adjust the width of my left navigation panel. This handle, represented by a div, triggers an onMouseDown() event that calculates the necessary widths and applies them to the relevant elements during subsequent calls to onMouseMove(). However, I am experiencing some issues.

1) The article element, located to the right of the navigation panel and handle, fails to trigger the onMouseUp() event when I release the mouse there. Could this be due to the initial activation of onMouseDown() in another element?

2) If I move the mouse rapidly to the right, I am unable to prevent text within the article from being selected, despite attempts to use methods like preventDefault() and stopPropagation().

3) Even if there is no text present in the article, the resizing functionality only works effectively when the mouse is moved very slowly. Moving the mouse swiftly over the article results in the resizing stopping abruptly unless the mouse button is released – in such cases, the resizing proceeds smoothly (implying that text selection was hindering the process even when no text was present). However, upon releasing the mouse button, the resizing should ideally cease (refer to point 1).

I have come across suggestions involving CSS properties like user-select: none, but implementing these would indiscriminately prevent text selection within the article, which seems excessive.

Hence, how can I achieve seamless resizing without inadvertent text selection while moving the mouse across any element within my document? (Following the initial click within the right div, of course.)

The following snippets showcase my HTML, CSS, and JavaScript code for reference:

To view the complete code and a functional example, please visit:
<a href="https://jsfiddle.net/45h7vq7u/" rel="nofollow noreferrer">Resize Handle Example</a>
<a href="https://jsfiddle.net/v1cmk2f6/1/" rel="nofollow noreferrer">Additional Implementation Example</a>

javascript html css preventdefault

Answer 1

Answer №1

Observe the start moving and finish moving events using your preferred method (such as onMouseDown and onMouseUp). Apply a CSS class to indicate the moving state when the action begins, and remove it when the action concludes.

If you're facing this scenario, you can experiment with the following:

Create a new CSS class:

.moving {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

Update your handMd() and handMu() functions:

function handMd(e) {
    mx = e.pageX;
    px = document.getElementById('nav').clientWidth;
    moving = true;
    document.getElementById('article').classList.toggle('moving', true);  // Include this line. 'article' refers to the element ID where text selection is not desired.
}
function handMu(e) {
    moving = false;
    document.getElementById('article').classList.toggle('moving', false);  // Include this line. 'article' refers to the element ID where text selection is not desired.
}

Answer 2

Observe the start moving and finish moving events using your preferred method (such as onMouseDown and onMouseUp). Apply a CSS class to indicate the moving state when the action begins, and remove it when the action concludes.

If you're facing this scenario, you can experiment with the following:

Create a new CSS class:

.moving {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

Update your handMd() and handMu() functions:

function handMd(e) {
    mx = e.pageX;
    px = document.getElementById('nav').clientWidth;
    moving = true;
    document.getElementById('article').classList.toggle('moving', true);  // Include this line. 'article' refers to the element ID where text selection is not desired.
}
function handMu(e) {
    moving = false;
    document.getElementById('article').classList.toggle('moving', false);  // Include this line. 'article' refers to the element ID where text selection is not desired.
}

Answer 3

Answer №2

Upon examining a solution found elsewhere, I have made some alterations.

In the HTML, only one event handler is now necessary:

...
<main>
    <nav id='nav'>
        <div class='navcont'>
            <p>nav 1</p>
            <p>nav 2</p>
        </div>
        <div class='handle' onmousedown='handMd(event)'>
        </div>
    </nav>
    <article id='article'>
    </article>
</main>
...

In the Javascript code, it is now more efficient to attach and detach the onmousemove event handler instead of calling onmousemove every time the mouse moves (to then check if the mouse button has been pressed). Additionally, the event is now attached to the document rather than each div on the screen:

var mx,px,minW = 200;
function handMd(e) {
    mx = e.pageX;
    px = document.getElementById('nav').clientWidth;
    document.addEventListener('mousemove',handMm);
    document.addEventListener('mouseup',handMu);
    document.getElementById('article').classList.toggle('moving',true);
    document.getElementById('nav').classList.toggle('moving',true);
}
function handMm(e) {
    var diff = e.pageX - mx;
    if (px+diff >= minW && window.innerWidth-px-diff >= minW) {
        document.getElementById('nav').style.width = (px+diff)+'px';
        document.getElementById('article').style.width = (window.innerWidth-px-diff)+'px';
    }
}
function handMu(e) {
    document.removeEventListener('mousemove',handMm);
    document.removeEventListener('mouseup',handMu);
    document.getElementById('article').classList.toggle('moving',false);
    document.getElementById('nav').classList.toggle('moving',false);
}

In the CSS section, following Ryan Tsui's advice, I removed unwanted text selection while resizing:

.moving {
    user-select:none;
    -moz-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
}

Answer 4

Upon examining a solution found elsewhere, I have made some alterations.

In the HTML, only one event handler is now necessary:

...
<main>
    <nav id='nav'>
        <div class='navcont'>
            <p>nav 1</p>
            <p>nav 2</p>
        </div>
        <div class='handle' onmousedown='handMd(event)'>
        </div>
    </nav>
    <article id='article'>
    </article>
</main>
...

In the Javascript code, it is now more efficient to attach and detach the onmousemove event handler instead of calling onmousemove every time the mouse moves (to then check if the mouse button has been pressed). Additionally, the event is now attached to the document rather than each div on the screen:

var mx,px,minW = 200;
function handMd(e) {
    mx = e.pageX;
    px = document.getElementById('nav').clientWidth;
    document.addEventListener('mousemove',handMm);
    document.addEventListener('mouseup',handMu);
    document.getElementById('article').classList.toggle('moving',true);
    document.getElementById('nav').classList.toggle('moving',true);
}
function handMm(e) {
    var diff = e.pageX - mx;
    if (px+diff >= minW && window.innerWidth-px-diff >= minW) {
        document.getElementById('nav').style.width = (px+diff)+'px';
        document.getElementById('article').style.width = (window.innerWidth-px-diff)+'px';
    }
}
function handMu(e) {
    document.removeEventListener('mousemove',handMm);
    document.removeEventListener('mouseup',handMu);
    document.getElementById('article').classList.toggle('moving',false);
    document.getElementById('nav').classList.toggle('moving',false);
}

In the CSS section, following Ryan Tsui's advice, I removed unwanted text selection while resizing:

.moving {
    user-select:none;
    -moz-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
}

Answer 5

Answer №3

Stopping the selection process may be a bit tricky, but one way to handle it is by using the event called onselect which is triggered when something is selected.

Answer 6

Stopping the selection process may be a bit tricky, but one way to handle it is by using the event called onselect which is triggered when something is selected.

Strategies for avoiding text selection interference with onMouseMove event

Answer №1

Answer №2

Answer №3

Similar questions

How can I retrieve all the data for the chosen item in a mat-select within a mat-dialog, while still preserving the code for setting the default selected value

Create a PHP form that includes a dropdown menu for selecting the quantity, allowing users to insert multiple rows of data inputted into the form

unable to retrieve the value of the table row with a particular class designation

Exploring the world of unit testing in a store - any tips on getting it to work

When applying the `display:block` and `width:100%` attributes to an HTML table cell, it may

Preventing Form Submission from Redirecting to the Top in an HTML Document with PHP

Using Javascript to automatically replace content when the page is loaded

Using the _id String in a GraphQL query to retrieve information based on the Object ID stored in a

Developing a pop-up feature that triggers upon clicking for a miniature rich text editing

The 'export '__platform_browser_private__' could not be located within the '@angular/platform-browser' module

Comparing Objects in an Array to Eliminate Duplicates and Make Updates in Javascript

The CSS selector within the website's URL

How can I design unique navigation menus using HTML, CSS, JavaScript, and jQuery?

Incorporating a setup file into my JavaScript project

Enhancing Bootstrap Carousel with various effects

What is the best way to display an icon and text side by side in the header of a Phonegap app

Restricting the frequency at which a specific key value is allowed to appear in JSON documents

When an iteration occurs within a for loop and a value changes, remember to incorporate a line break or equivalent element using jQuery

Including an embedded iframe in an asp.net web form

Methods for anchoring an element at the bottom of a square container div