时间戳

首页 > 解决方案 > 带有鼠标滚轮的mousedown不断在javascript中重新触发

javascript - 带有鼠标滚轮的mousedown不断在javascript中重新触发

问题描述

我有一个简单的页面：

<!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>

我有这个javascript：

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

当我左键或右键单击并按住时，它会触发一次。如果我单击鼠标滚轮（按钮 4）并按住，它会连续触发。如果按住鼠标滚轮按钮，有没有办法禁用它或让它触发一次？

标签： javascripttriggersclickmousewheel

解决方案

在 DOM Enlightenment Cody Lindley 书中，关于鼠标点击事件写道：

根据环境配置，如果在按下和释放定点设备按钮之间发生了一种或多种事件类型 mouseover、mousemove 和 mouseout，则可能会调度 click 事件。click 事件后面也可能有 dblclick 事件”

考虑到这一点，我将做出一个明智的猜测，类似的事情正在发生在你自己身上。为了防止这种情况，您可能需要考虑使用Underscore.js库提供的节流或去抖动。

推荐阅读