下拉菜单项中的 jquery 滑块导致太多事件

Posted 2023-02-17

【中文标题】下拉菜单项中的 jquery 滑块导致太多事件

【英文标题】：jquery slider in dropdown menu item causing too many events

【发布时间】：2013-06-20 06:59:14

【问题描述】：

我在下拉菜单项中使用 jQuery 滑块。当我单击菜单项时，会打开一个带有滑块的下拉菜单。用户应拖动滑块手柄之一。从那时起，该页面上的任何鼠标移动都会导致滑块事件和回调。这一直持续到我单击页面上的其他位置，有效地回滚菜单向下。

这种行为正常吗？用户释放滑块手柄后，如何让滑块更改事件停止？每当用户更改滑块时，我都有一个从数据库重新加载的页面。这会导致数据库负载过大。

我正在使用带有引导程序的 jQuery UI。您可以在http://jsfiddle.net/Sh5A5/2/ 看到示例

这里是 JS：

islide = 0;
$("#XYZ").text("DDDDDxD");
$("#XYZ").append("<b class=caret></b>");
$("#slider-range").slider(
    range: true,
    min: 0,
    max: 500,
    values: [75, 300],
    slide: function (event, ui) 
        alert("hello #" + ++islide);
        $("#XYZ").html("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1) + " <b class='caret'></b>");


    
);

和html：

<div class="nav dropdown"> <a id="XYZ" data-toggle="dropdown" class="btn btn-primary" href="#"></a>
    <ul class="dropdown-menu">
        <li><a href="#">
                <p>Range: 0 to Inf</p>
                   <div id="slider-range"></div>
                </a>
        </li>
    </ul>
</div>

我在没有引导程序的情况下尝试了同样的方法。它看起来很丑，但行为却是一样的。有更好的选择吗？

谢谢

【参考方案1】：

导致这种行为的原因是这一行：

alert("hello #" + ++islide);

当在滑动事件处理程序中调用 alert() 时，鼠标永远不会被释放。 所以你必须删除对 alert() 的调用： http://jsfiddle.net/Rusln/eKjCD/