Javascript (jQuery） 事件失败.我该如何解决这个问题

Javascript (jQuery) events failing. How can I fix this?

本文关键字：解决 何解决 问题 事件 jQuery 失败 Javascript      更新时间：2023-09-26

这个（jQuery）函数在jQuery(document).ready和jQuery(document).resize上调用。它在ready条件下运行良好，但在resize事件有点糟糕。它们要么继承功能，要么在 slideSwitch 的情况下，每次调整大小似乎都会触发。

(function(jQuery){
    jQuery.fn.responsive = function() {
        // Vars
        var menuButton = jQuery('nav #menu-button');
        var menuItems = jQuery('nav ul');
        var menuLinks = jQuery('nav ul li a.scroll');
        var viewportW = jQuery(window).width(); 
        var viewportH = jQuery(window).height();  
        // Menu links
        menuLinks.click(function(e){
            if (viewportW > 800) {
                e.preventDefault();
                e.stopPropagation();
                var pos = jQuery(this.hash).offset().top;
                jQuery('html,body').animate({scrollTop: pos}, 1000);
            } else if (viewportW < 799) {
                e.stopPropagation();
                menuItems.slideUp('fast'); // Hide menu on click
            }
        });
        // Menu button
        menuButton.click(function(e){
            menuItems.slideToggle('fast');
            //e.stopPropagation();
            //e.preventDefault();
        });
    }
})(jQuery);

我做错了什么？我试图杀死事件传播，但无济于事。

编辑：

这将在以下之后运行：

// Doc ready
jQuery(document).ready(function() {
    // Run functions
    jQuery().responsive();
});

// On resize
jQuery(window).resize(function(){  
    jQuery().responsive();
});

对不起，我之前误解了你的问题。

如我所见，没有必要每次调整大小都评估 $.response（）。

只

$.fn.responsive = function(){
    //Vars
    var menuButton = $('nav #menu-button');
    var menuItems = $('nav ul');
    var menuLinks = $('nav ul li a.scroll');
    //Menu links
    menuLinks.click(function(event){
        //**move width&height inside
        var viewportW = $(window).width(); 
        var viewportH = $(window).height();
        if(viewportW > 800){
            event.preventDefault();
            event.stopPropagation();
            var pos = $(this.hash).offset().top;
            $('html,body').animate({scrollTop: pos}, 1000);
        }else if(viewportW < 799){
            event.stopPropagation();
            menuItems.slideUp('fast');// Hide menu on click
        }
    });
    //Menu button
    menuButton.click(function(event){
        menuItems.slideToggle('fast');
        //event.stopPropagation();
        //event.preventDefault();
    });
}

然后

$(document).ready(function(){
    //just once
    $.fn.responsive();
});

当您调用其中一个回调注册表函数（如 $(someElement).click(...) ）时，您实际上是在为该事件添加一个处理程序。 如果使用相同的函数调用两次，则调用处理程序两次。 演示一下，在同一页面中尝试这个html页面（使用jquery.js）：

<html>
<head>
<script src="jquery.js"></script>
<script>
    function addhook() {
        $("div").click(function(e) {
            console.info("click!");
            $("body").append($("<div>click!</div>"));
            return false;
        });
    }
    $(function() {
        addhook();
        $(window).resize(addhook);
    });
</script>
</head>
<body>
<div><a href="#">Click me</a></div>
</body>
</html>
在

第一次加载页面时，它的行为符合预期，但是在调整窗口大小后，单击"单击我"会获得多个"单击！

重新

注册处理程序的唯一原因是相应的元素是否已销毁并重新创建。

如果发生这种情况，并且在必要时尝试可靠地重新注册处理程序不方便，请考虑使用委托事件或 .live（）。

另请注意 .off（） 函数，它可以删除一组元素上的所有处理程序。

最后，您可能应该更改

jQuery.fn.responsive = function() {

自

jQuery.responsive = function() {

添加到jQuery.fn添加可以从jQuery对象调用的函数，即允许，比如说，

$("div").responsive();

出于某种原因，这些函数也被添加到jQuery对象本身，因此它仍然有效，但后者使函数的目的更加明确并保持 jQuery 类干净。

相关文章：