基于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页面.