jquery如何防止transitionend事件被调用两次答案

【问题标题】：jquery how to prevent transitionend event being called twicejquery如何防止transitionend事件被调用两次
【发布时间】：2014-03-11 11:57:43
【问题描述】：

closeContent()fucntion 的一些问题，我无法弄清楚每次单击 .show-content 时如何阻止它运行。

transitionend 基本上不应该踢两次。

任何帮助将不胜感激。

$('.show-content').on('click', function (e) {
  e.preventDefault();
  openContent();
});
$('#load-content').on('click','.prev',function (e){
  e.preventDefault();
  closeContent(this);
});
function openContent(){  
    $('#load-content').load('../views/product-page.html');
    $('.container').addClass('loaded');
    $("#load-content").on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function () {
    $(this).addClass('animate');
    var body = $("body,html");
    body.animate({
      scrollTop: 0
    }, 800);
});
}
function closeContent(ele){
    var Loaded = !$(ele).closest('.container').hasClass('loaded');
    if (!Loaded) {
        $('.animate').removeClass('animate');
        $("#load-content").on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function () {
            $('.loaded').removeClass('loaded');
            $('#show-content').remove();
        });
    }           
}

【问题讨论】：

标签： jquery css load

【解决方案1】：

你不应该嵌套事件......无论如何，作为一个简单的修复，使用one()：

$("#load-content").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function () {...});

【讨论】：

【解决方案2】：

我不确定你想要什么，但从外观上看，你正在停止 e.preventDefault(); 的任何默认操作，因为它没有解决你的问题，我猜你想防止事件冒泡 dom 树这将防止任何父母被告知该事件，为此您可以使用event.stopPropagation()查看文档here。希望能回答您的问题

【讨论】：