jquery - 基于 Modernizr : click vs hover 的不同方法

Question

我希望能够根据 Modernizr 的触摸/非触摸输出在 .mouseover 和 .click 事件之间进行选择。

if (Modernizr.touch) {
  $(el).click(stuff);
  $(el).click(stuff);
} else {
  $(el).mouseover(stuff);
  $(el).mouseover(stuff);
}

但我不想把所有这些东西写两次。是否可以定义一些东西以便我可以调用:

if (Modernizr.touch) {correctEvent = click} else {correctEvent = mouseover}
$(el).correctEvent(stuff);
$(el).correctEvent(stuff);

Answer 1

是的，使用替代对象访问表示法[]很容易做到这一点:

var eventName = Modernizr.touch ? 'click' : 'mouseover';
$(el)[eventName](stuff);

这里的相关事实是，由于 Javascript 函数是一等对象，因此可以像任何其他对象属性一样访问它们。例如，您可以这样做:

var foo = { bar: 100 };
console.log(foo.bar);
console.log(foo['bar']);

两条线实际上是相同的。

由于 click 和 mouseover 是 jQuery 选择的属性，因此您可以像这样访问它们。例如，您可以(如果您愿意)将 click 方法调用为 $(el)['click']()。没有意义，但你可以做到。

在这里，您可以利用这种替代语法来处理要调用的函数取决于其他因素的情况。

编辑:有关此内容的更多文档，请参阅 MDC page on "member operators" .