Javascript 如何在MouseUp事件期间更改DOM元素而不中断双击事件_Javascript_Jquery_Javascript Events

Javascript 如何在MouseUp事件期间更改DOM元素而不中断双击事件

javascript jquery

Javascript 如何在MouseUp事件期间更改DOM元素而不中断双击事件,javascript,jquery,javascript-events,Javascript,Jquery,Javascript Events,在mouseup事件处理程序中，我需要从目标DOM元素中删除CSS类名，但这样做似乎可以防止双击事件触发。我想这是因为我正在更改双击所附加到的DOM元素，而JavaScript正在取消事件队列，因为元素已更改。到目前为止，我唯一想到的是在300毫秒左右的超时时间内删除CSS类这里有一些粗略的代码。jQuery只是为了方便起见 var myElm = $(someElm); myElm .mouseup(function(e) { $(this).removeClass("a

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

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

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

它永远不会打招呼

有人找到了一个优雅的解决方案吗？

我认为这两种方法中的任何一种都适用于您：

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

及

可能删除“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>


.style1
{
宽度：100px；
高度：100px；
边框：实心1px黑色；
背景颜色：绿色；
}
.style2
{
背景色：红色；
宽度：200px；
高度：200px；
}
$（函数（）{
var myElm=$（'.style2'）；
髓鞘
.mouseup（函数（e）{$（this.removeClass（“style2”）；}）
.dblclick（函数（e）{alert（'hi！'）；}）；
});

对我有效：@Felix它对我无效。。。您使用的是哪种浏览器？@wong2:Ok只是想澄清一下：OP希望在双击鼠标右键时调用这两个处理程序？我在Mac OS X上使用Chrome 9。在Firefox 3.6.13（Mac）中也可以使用。@felix@wong2-对我来说很有效，Safari 5.0.3Mac@felix哦，这对我也很管用。我只是有点误会。我在Chrome、Firefox和WindowsIE8上进行了测试，我认为这正是OP不想要的。他正在体验与使用

stopPropagation

相同的效果，但他不希望这样。但他希望“dblclick”处理程序运行。。。你的解决方案保证不会。它仍然适用于我。我只是阻止mouseup事件传播。没错，这可能是因为

mouseup

和

dblclick

是不同的事件。但是如果它和不停止它有相同的效果，为什么要停止它呢？在我的例子中，abc只是一个由jQuery插件添加的市场类。。。但是，是的，如果我最初认为它导致DOM元素重新布局的想法是正确的，那么您的答案可能是正确的处理方法。

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