javascript – 不能直接将[audio] .play()作为jQuery回调

考虑以下代码：

var music = $("audio")[0];
//doesn't work
$("#pbutton").click(music.play);
//works
$("#pbutton").click(function(){music.play()});

无效的行在Firefox中返回此错误：

TypeError：对未实现接口HTMLMediaElement的对象调用’play’.

我在这里错过了什么吗？为什么这不起作用？

更新：我为此做了一个fiddle.

解决方法:

这其实很简单. I’ve updated your fiddle来展示它.

var x = {
    play: function()
    { 
        console.log(this);
    }
};

$(document).ready(function()
{
    var music = document.getElementById("song");

    $("#play").click(function()
    {
        x.play();
    });

    $("#play").click(x.play);

    $("#pause").click(music.pause);
});

查看代码和开发人员控制台.在第一个单击处理程序中,您调用对象x的函数play.由于它是“正常”调用,函数中的this是x对象,这是正确的.

作为您的第二个单击处理程序,您直接指向x.play函数.但是因为jQuery维护了你用作click处理程序的函数的this-context,所以函数中的this现在是play-button.

现在,如果你的play-function中的某些东西使用了这个变量,你会得到错误(因为在你的play函数中你假设这是你的x对象).这就是为什么你经常需要围绕无参数函数包装一个匿名函数的原因 – 调用使其工作.