基于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"。