Question

我需要在mouseup事件处理程序中从目标DOM元素中删除CSS类名，但这样做似乎阻止了双击事件的触发。我想这是因为我正在改变附加了双击的DOM元素，而JavaScript正在取消事件队列，因为元素已更改。到目前为止，我唯一想到的就是将CSS类的删除时间超过300毫秒...

这是一些粗略的代码。 jQuery只是为了方便。

var myElm = $(someElm);
    myElm
      .mouseup(function(e) { $(this).removeClass("abc"); })
      .dblclick(function (e) { alert ('hi!'); });

永远不会说嗨！

有人为此获得了优雅的解决方案吗？

Answer 1

可能删除类“abc”，您可以更改无法点击的对象的大小或可见性，以便不会触发事件。尝试将此属性（如宽度，高度，可见性）存储在您不会删除的另一个类中。

即使这对我也很好。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        .style1
        {
            width: 100px;
            height: 100px;
            border: solid 1px black;
            background-color: Green;
        }
        .style2
        {
            background-color: Red;
            width: 200px;
            height: 200px;
        }
    </style>
    <script type="text/javascript" src="Scripts/jquery/jquery-1.4.2.js"></script>
    <script type="text/javascript">
        $(function () {
            var myElm = $('.style2');
            myElm
              .mouseup(function (e) { $(this).removeClass("style2"); })
              .dblclick(function (e) { alert('hi!'); });
        });

    </script>
</head>
<body>
    <div class="style1 style2" />
</body>
</html>

Answer 2

我认为这些方法中的任何一种都适合你：

  .mouseup(function(e) { 
    $(this).removeClass("abc"); 
    e.stopPropagation();  
  })

和

  .mouseup(function() { 
    $(this).removeClass("abc"); 
    return false;
  })

如何在不中断双击事件的情况下在MouseUp事件期间更改DOM元素

2 个答案: