Question

我想为我的网站创建一个响应式菜单，但是，我有一个问题：我有两个设备（桌面和mpbile手机）具有相同的HTML但两个不同的JS。我用几行代码分享了我的问题。

eventDesktop = function() {
  $('header').click(function() {
    console.log('Desktop');
  });
};
eventPhone = function() {
  $('header').click(function() {
    console.log('Phone');
  });
};
eventWitch = function() {
  if (window.innerWidth > 480) {
    eventDesktop();
  } else {
    eventPhone();
  }
};

eventWitch();

$(window).resize(function() {
  eventWitch();
});

所以，在加载之后，因为只有一个是加载的，但是在调整大小之后，同一个元素有两个功能，我想只有一个我需要的功能。所以在这里，我想只在控制台上看到桌面＆＃39;或者＆＃39;电话＆＃39;但是，当我点击时，两个都不是。

感谢阅读。如果您有疑问，我可以指明我的问题。

问候。

Answer 1

您正在调整窗口大小的同一元素上绑定两个事件。你可以试试这个

$('header').click(function() {
 if(window.innerWidth > 480)
    console.log('Desktop');
 else
    console.log('Phone');
});

因此，每次用户点击标题时都要检查。

Answer 2

试试这个

eventDesktop = function() {
    $('header').unbind('click').click(function() {// here it will removes all old click events assigned to this element.
        console.log('Desktop');
    });
};
eventPhone = function() {
    $('header').unbind('click').click(function() {// here it will removes all old click events assigned to this element.
        console.log('Phone');
    });
};
eventWitch = function() {
    if (window.innerWidth > 480) {
        eventDesktop();
    } else {
        eventPhone();
    }
};

eventWitch();

$(window).resize(function() {
    eventWitch();
});

Answer 3

您似乎在创建2个不同的事件处理程序，因此他在您的情况下使用它们。

尝试.unbind()他们：

$(window).resize(function() {
    $( 'header' ).unbind( 'click' );
    eventWitch();
});

所以所有点击事件都会被删除，请记住这一点。

我还没有尝试过另一种方法，但也许有帮助：jQuery multiple click event

正如 andrea.spot 所写：＆＃34; 你需要让你的处理函数返回false ..它会阻止事件冒泡。＆＃34; < / p>

将此添加到您的代码中：

eventDesktop = function() {
    $('header').click(function() {
        console.log('Desktop');
        return false;
    });
};
eventPhone = function() {
    $('header').click(function() {
        console.log('Phone');
        return false;
    });
};

最后一个解决方案是改变思维方式。这意味着执行Click-Handler和THAN检查Windows Size。目前，您检查窗口大小而不是调用Click-Handler，这将始终导致多个Click处理程序，但如果您创建一个处理程序而不是语句，则不会。

我的代码文字：

eventWitch = function() {
    $( 'header' ).click( function(){
        if (window.innerWidth > 480) {
            console.log( 'Desktop' );
        } else {
            console.log( 'Mobile' );
        }
    }
};

其中一种解决方案是否适合您？

响应式菜单Js（清楚dom？）

3 个答案: