gpt4 book ai didi

javascript - jquery transitionend 函数 kiks 每次我重复点击

转载 作者:太空宇宙 更新时间:2023-11-04 03:59:30 24 4
gpt4 key购买 nike

如何防止 openContent();踢 $("#load-content").on("transitionend 每次我点击 .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();
});
}
}

最佳答案

通常,您应该为事件命名空间,并在触发后关闭事件

$el.on('transitionend.mynamespace' function(){
$el.off('transitionend.mynamespace')
});

例子:

$dropdown.on('transitionend.fadein' function() {
// some function to be called on transitionend
doSomething();
// event will not be called again
$dropdown.off('transitionend.fadein')
});

更新


适应你的代码

(您还使用了太多的过渡端处理程序)

我创建了一个带有 e 子命名空间的命名空间所以现在你可以说
.off('transitionend.loadcontent')
.off('transitionend.loadcontent.open')
.off('transitionend.loadcontent.close')

试试哪个能满足你的需求

您通常应该阅读以下内容:http://api.jquery.com/event.namespace/

而且代码看起来也不是太神奇。
您应该考虑更重要的编码风格和缓存选择器,以提高可读性和性能。例如。我用 ' 替换了所有 " 因为你使用的是混合引号。也许在你的编辑器中运行 jsHint 并缓存所有需要多次的元素。但这对于这件事的工作并不重要。

$('.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.loadcontent.open webkitTransitionEnd.loadcontent.open', function() {
$(this).addClass('animate');
var body = $('body,html');
body.animate({
scrollTop: 0
}, 800);
$('#load-content').off('transitionend.loadcontent.open webkitTransitionEnd.loadcontent.open');
});
}

function closeContent(ele) {
var Loaded = !$(ele).closest('.container').hasClass('loaded');
if (!Loaded) {
$('.animate').removeClass('animate');
$('#load-content').on('transitionend.loadcontent.close webkitTransitionEnd.loadcontent.close', function() {
$('.loaded').removeClass('loaded');
$('#show-content').remove();
});
$('#load-content').off('transitionend.loadcontent.close webkitTransitionEnd.loadcontent.close');
}
}

关于javascript - jquery transitionend 函数 kiks 每次我重复点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22323929/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com