如何在 onclick 和 mouseover 方法之间切换？

Question

我有两个按钮：

<button id="Ck">Click</button>
<button id="Me">Mouseenter</button>

我想让用户有机会通过单击这两个按钮之一来选择如何打开我的 jQuery 动画菜单（单击或鼠标输入）。

有没有办法在这些方法之间切换？即使刷新页面，我必须做些什么才能保留这些选择？

Answer 1

很容易。

首先，给按钮一个类：

<button id="Ck" class="ClickMouseenter">Click</button>
<button id="Me" class="ClickMouseenter">Click</button>

然后在点击按钮时检查id，并适当分配：

$('.ClickMouseenter').on('click',function(){
    var id = this.id,
        $menu = $('#MenuExample');

    $menu.off();
    if(id==='Ck'){
        $menu.on('click',function(){
             // click magic;
        });
    } else {
        $menu.on('mouseenter',function(){
            // mouseenter magic;
        });
    }
});

或者如果他们使用不同的处理程序执行相同的功能：

// yay for faster code processing!
$('.ClickMouseenter').on('click',function(){
    var id = this.id,
        action = (id==='Ck' ? 'click' : 'mouseenter');

    $('#MenuExample').off().on(action,function(){
        // action magic;
    });
});

.off() 删除现有的分配（click 或mouseenter），然后根据您单击的button 的id 应用新的.on() 处理程序。

关于在页面刷新时保留这些设置...我的第一个倾向是使用sessionStorage（注意：这仅适用于 IE8 及更高版本；如果您正在为 IE6 或 IE7 编写代码，那么您将无法使用运气）。从包含sessionStorage 赋值的事件中创建一个函数：

function setMenu(action){
    $('#MenuExample').off().on(action,function(){
        // action magic;
    });
    sessionStorage.menuType = action;
}

$('.ClickMouseenter').on('click',function(){
    var id = this.id,
        action = (id==='Ck' ? 'click' : 'mouseenter');

    setMenu(action);
});

现在您可以在页面加载时调用它以在必要时重新分配选择，并使用默认后备：

if(sessionStorage.length > 0){
    setMenu(sessionStorage.menuType);
} else {
    setMenu('mouseenter');
}

这显然是一个过于简化的版本，但应该给出一个开始的想法。

Answer 2

您只需根据点击的内容设置菜单：

function SetupClick() {
  // Setup click functionality here
}

function SetupMouseover() {
  // Setup mouseover functionality here
}

$('#Ck').click(function() {
  SetupClick();
  // Optionally, save choice
  localStorage['userchoice'] = 'click';
});
$('#Me').click(function() {
  SetupMouseover();
  // Optionally, save choice
  localStorage['userchoice'] = 'mouseover';
});

您可以将选项保存在服务器端，也可以使用HTML5 Local Storage，但旧版浏览器不支持它。如果您保存了选择，则必须在文档加载时设置该功能：

$(document).load(function() {
  if (localStorage && localStorage["userchoice") {
    if (localStorage["userchoice"] == 'click') {
      SetupClick();
    }
    else if (localStorage["userChoice"] == 'mouseover') {
      SetupMouseover();
    }
  }
});

这是您更新后的jsFiddle 的链接。我稍微清理了代码并添加了对$('#Wp').off(); 的调用以重置事件，这样两者都不会发生。