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

Why won't console.log function execute in this particular situation?

Repurposing JavaScript objects after clearing their contents

Can anyone recommend the best method for pinpointing the exact building the user is currently in - utilizing HTML5 geolocation or creating a customized map?

Ways to extract particular items from a JSON array and store them in a JavaScript array

Issue with using Sinon FakeServer with Mocha

Content displayed above a slideshow of images in a stunning gallery on Squarespace platform

Issue: Module "expose?Zone!zone.js" could not be located

Is there a way to drop a pin on the Google Maps app?

My AJAX function is not functioning as intended

How are the plugins configured for `postcss-import` implemented?

Storing data with jQuery

There seems to be a problem with the responsive navigation menu when activated in responsive mode and then resizing the screen

Automatically update and reload Express.js routes without the need to manually restart the server

having trouble with my lambda function reading the basic json object

Having trouble with Angular ngRoute functionality?

Is there a way to link code and unit testing directly to npm test?

Transfer the data from a post request through routes following the MVC pattern

Guide to customizing action button color on MatSnackbar?

Interaction issue with Material UI and React tabs: hovering fails to open and close tabs correctly

Javascript datatables do not allow for setting a default column sort