mousedown with mousewheel constantly re-triggers in javascript

Question

I have a simple page:

<!doctype html>
<html>
<head>
<style type="text/css">

.wrapper_1
{
    width:500px;
    height:300px;
    border:1px solid black;
    overflow:hidden;
    margin-top:100px;
}

.ul1
{
    white-space:nowrap;
    margin-bottom:35px;
    background-color:#ededed;
}
</style>
</head>
<body>
<div id="d1" class="wrapper_1" style="position: relative;">
    <div class="mf_scrollbar_scroll_wrapper">
        <ul class="ul1">
            <li>item a</li>
            <li>item</li>
            <li>item</li>
            <li>item d</li>
            <li>item</li>
            <li>item lorem ipsum dolor sit amet adipiscing lorem ipsum dolor sit amet adipiscing lorem ipsum dolor sit amet adipiscing lorem ipsum dolor sit amet adipiscing</li>
            <li>item</li>
            <li>item h</li>
            <li>item</li>
            <li>item</li>
            <li>item l</li>
            <li>item</li>
            <li>item</li>
            <li>item p</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item t</li>
            <li>item</li>
            <li>item</li>
            <li>item x</li>
            <li>item</li>
            <li>item z</li>
            <li>item</li>
            <li>item</li>
            <li>item zz</li>
            <li>item</li>
            <li>item</li>
            <li>item zzz</li>
        </ul>

        <div>hello</div>
    </div>  
</div>


</body>

and I have this javascript:

document.getElementById('d1').addEventListener('mousedown', function(evt){console.log(evt)}, false)

When I left- or right-click and hold, it triggers a single time. If I click the mousewheel down (button 4) and hold, it continuously triggers. Is there a way to disable this or to just have it trigger a single time if the mousewheel button is held down?

score 2 · Accepted Answer · answered Dec 19 '18 at 19:00

2

In the book DOM Enlightenment Cody Lindley writes regarding the mouse click event:

Depending upon the environment configuration, the click event may be dispatched if one or more of the event types mouseover, mousemove, and mouseout occur between the press and release of the pointing device button. The click event may also be followed by the dblclick event"

With that in mind I am going to make an informed guess that something similar is occurring for yourself. To prevent this you may want to look into using a throttle or debounce provided by the Underscore.js library.

answered Dec 19 '18 at 19:00

Nick Lee

842
2
11
27

1

I did some additional research, and it looks like one simple workaround, which is similar to the 2 functions you suggest, is to set a global variable tag associated with that mousedown instance when the 1st mousedown triggers. It doesn't get unset until the mouseup occurs for that specific instance, and if it's active, additional attempts to retrigger the mousedown will be ignored. https://stackoverflow.com/questions/322378/javascript-check-if-mouse-button-down I haven't tested it yet, but it looks like it might work. – raphael75 Dec 20 '18 at 20:37

mousedown with mousewheel constantly re-triggers in javascript

1 Answers1