在 div 之外点击应该会给 div 添加抖动效果；在点击里面不应该有任何变化

Question

在页面重新加载时发生。如果我在 div 中单击第一次摇晃后，它仍然在摇晃。在 div 内单击不应添加抖动效果。我的问题是什么？

    $(document).mouseup(function (e) { 
        if ($(e.target).closest("#inside_box").length === 0) { 
            document.addEventListener("click", (e) => {
                e.preventDefault(); 
                $("#inside_box").addClass('shake'); 
            });
            document.addEventListener("animationend", (e) => {
                $("#inside_box").removeClass('shake');
            });
        } 
    });

#inside_box {
background: #f00;
height:100px;
width:100px;
}
.shake {
    animation-name: shake;
    animation-duration: 1s;
    animation-fill-mode: both;
}
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(10px);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>
  <div id="box">
    <div id="inside_box">
      Content
    </div>
   </div>
</body>

Answer 1

最好使用单击侦听器执行此操作，而不是在事件处理程序中添加其他事件侦听器

工作示例：

$(document).click(function(e) {
  if (!$(e.target).closest("#inside_box").length) {
    $("#inside_box").addClass('shake').on("animationend", function(e) {
      $(this).removeClass('shake').off("animationend");
    });
  }
});

#inside_box {
background: #f00;
height:100px;
width:100px;
}
.shake {
    animation-name: shake;
    animation-duration: 1s;
    animation-fill-mode: both;
}
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(10px);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<body>
  <div id="box">
    <div id="inside_box">
      Content
    </div>
  </div>
</body>

在 div 之外点击应该会给 div 添加抖动效果；在点击里面不应该有任何变化

Clicking outside of a div should add shake effect to the div ; inside click there should not be any changes

javascript

jquery

shake

twitter-bootstrap