jquery - 基于 Modernizr 的不同方法：点击 vs 悬停

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);

score 6 · Accepted Answer

是的，这很容易使用替代对象访问表示法[]：

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 页面上的“成员运营商”。

1 回答 1