个人中心
gpt4 book ai didi

javascript - 关于 mouseup 事件的 JQuery 问题

转载 作者：行者123 更新时间：2023-11-30 13:31:14 26 4
gpt4 key购买 nike

我有列表，可以通过 mousedown 事件选择列表的元素(一次一个，或在 Ctrl 键的帮助下选择多个)。我想通过 mouseup 在文档中除这些列表元素之外的任何地方取消选择所选元素。我试过这个但不起作用:

$("body").delegate("body:not(.selected_li)", "mouseup", function(event) { .......

当我单击文档上的任意位置(但选定的 li)时，不会发生 mouseup 事件。

请帮帮我

谢谢。

最佳答案

您需要将事件监听器绑定(bind)到正文，并检查被单击的元素以查看它是否是 .selected_li。 ，或其后代之一:

$('body').mouseup(function(e) {
    if ($(e.target).closest('.selected_li').length == 0) {
        // de-select
    }
});

这里真正的技巧是使用 .closest(".selected_li")因为它确保包含您位于“.selected_li”的子项之上的实例。

使用 .is(".selected_li")如果您的列表恰好看起来像这样，将无法工作:

<ul>
    <li>Item 1</li>
    <li class="selected_li"><i>Item 2</i></li>
    <li>Item 3</li>
</ul>

如果您在项目 2 上松开鼠标按钮，event.target将是 <i>元素，而不是 <li> , 所以 .is(".selected_li")将返回错误。所以我们必须查看事件目标或其任何祖先是否为 ".selected_li"通过使用 .closest() 进行搜索并检查我们是否匹配。

编辑:使用.delegate()这不是一个好主意。这会将事件处理程序绑定(bind)到 <body> 的每个后代元素。 ，这是非常多余的，因为事件总是冒泡到 <body>无论如何，你只需要做一次。然而，它是可能的，但您需要确保排除足够多 - 您需要排除“.selected_li”及其所有后代和所有祖先:

$("body").delegate(":not(.selected_li, .selected_li *, :has(.selected_li))", "mouseup", function(e) {
    // de-select
});

但是，这将导致事件处理程序在每次点击时被调用多次。如果您在下一段上松开鼠标按钮，您将执行事件处理程序 5 次。每个<em>一次, <p> , <div class="section"> , <div id="content"> , <div id="wrapper"> .

<body>
    <div id="wrapper">
        <div id="content">
            <div class="section">
                <p><em>Here is a paragraph</em></p>
            </div>
        </div>
    </div>
</body>

因此，只需将一次绑定(bind)到正文，以便每次点击仅调用一次事件处理程序。

关于javascript - 关于 mouseup 事件的 JQuery 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6700293/

26 4 0
文章推荐： javascript - 是否有 CSS 或 Javascript 解决方案来更改当前页面导航选项卡的背景图像？
文章推荐： javascript - stringByEvaluatingJavaScriptFromString 问题
文章推荐： JavaScript 原型(prototype)继承
文章推荐： javascript循环遍历数组并访问键: value
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com