即使类名不存在,Javascript事件仍会触发

Javascript event still firing even when class name doesn't exist

本文关键字:事件 Javascript 不存在      更新时间:2023-09-26

谁能给我解释一下,当一个事件的目标类名不存在时,它是如何触发的?

 (function ($) {
    var config = {};
    $(document).ready(function () {
        var wi = $(window).width();
        if ( wi > 768 ) {
            $('body').addClass('dosomething');
        } else {
            $('body').removeClass('dosomething');
        }
        $(window).resize(function() {
            var wi = $(window).width();
            console.log(wi);
            if ( wi > 768 ) {
                $('body').addClass('dosomething');
            } else {
                $('body').removeClass('dosomething');
            }
            var $container = $('.email-signup__wrap'),
            $cHeight = $('.email-signup').outerHeight();
            // $('.dosomething .email-signup__wrap').on('mouseenter mouseleave', function(ev) {
            $('body').on('mouseenter mouseleave', '.dosomething .email-signup__wrap' , function(ev) {
                var $this = $(this);
                if ( ev.type === 'mouseenter' ) {
                    TweenMax.to($container, .4, {
                        ease: Power2.easeOut,
                        css:{
                            overflow: 'visible',
                            position: 'absolute',
                            top: -$cHeight
                        }
                    });
                }
                else
                {
                    TweenMax.to($container, .4, {
                        ease: Power2.easeOut,
                        css:{
                            position: 'relative',
                            top: 0
                        },
                        onComplete: hide
                    });
                    function hide(){
                        $container.css('overflow', 'hidden');
                    }
                    $("div.mce_inline_error").remove();
                }
            });
        });
    });
})( jQuery );

我把dosomething类添加到每个选择器中,试图防止事件在屏幕尺寸小于768px时触发。

基本上,用户将鼠标悬停在页脚栏上,然后从画布上弹出一个联系表单,但是在较小的屏幕/移动设备上,它在页面内容的底部保持静态。

我知道这是一个基本的代码,但是,我已经试着让它工作了好几天,我正在赶一些代码,试图找到一个解决方案。

我不是工作后,媒体查询等....为了我自己的理智,我真的很想理解这一点。

最终工作解

  (function ($) {
        var config = {};
        $(document).ready(function () {
            $(window).on("resize", function () {
                resizeWindow();
            }).trigger("resize");
            var $container = $('.email-signup__wrap'),
                $cHeight = $('.email-signup').outerHeight();
            $(document).on({
                mouseenter: function() {
                    TweenMax.to($container, .4, {
                        ease: Power2.easeOut,
                        css:{
                            overflow: 'visible',
                            position: 'absolute',
                            top: -$cHeight
                        }
                    });
                },
                mouseleave: function() {
                    TweenMax.to($container, .4, {
                        ease: Power2.easeOut,
                        css:{
                            position: 'relative',
                            top: 0
                        },
                        onComplete: hide
                    });
                    function hide(){
                        $container.css('overflow', 'hidden');
                    }
                    $("div.mce_inline_error").remove();
                }
            }, ".dosomething .email-signup__wrap");
        });
        function resizeWindow() {
            config.wWidth = $(window).width();
            if ( config.wWidth > 768 ) {
                $('body').addClass('dosomething');
            } else {
                $('body').removeClass('dosomething');
            }
        }
    })( jQuery );

在jquery中使用event delegation您可以动态地添加类.dosomething

$('body').on('mouseenter mouseleave', '.dosomething .email-signup__wrap' , function(ev) {