基于Modernizr的不同方法：click vs hover

我希望能够根据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页面 。