javascript - Crossrider - 如何触发页面中用户事件的事件？

Question

我是 Crossrider 的新手，我希望能够根据用户与页面的交互触发事件。

例如，当用户将鼠标悬停在 html 输入元素上时播放声音:

extension.js

appAPI.ready(function() {
    //the link to Alarm01 is valid
    var Alarm01 = new Audio('http://localhost/playing-with-sound/jquery%20mobile%20forms/sounds/Alarm01.wav') 
    $('input').mouseenter(function(){
        Alarm01.play();
    })
});

上面的代码不起作用。有谁知道这样做的正确方法是什么？

我也试过将它放在 background.js 中——这也不起作用。我使用 Chrome 作为我的浏览器。

想法是让用户在弹出窗口中选择一个事件(例如，将鼠标悬停在输入元素上时播放 Alarm01)，然后立即将其应用到当前网页。以便下次用户将鼠标悬停在输入元素上时播放 Alarm01。

在 Crossrider 扩展中访问 HTML 页面元素的正确方法是什么？

谢谢!

编辑:跟进问题

是否可以在用户与 JQuery Mobile 元素 交互时触发事件？例如 data-role="slider"的一个元素:

appAPI.ready(function($) {
    //the link to Alarm01 is valid
    var Alarm01 = new Audio('http://localhost/playing-with-sound/jquery%20mobile%20forms/sounds/Alarm01.wav');
    // Add audio to page
    document.body.appendChild(Alarm01);
    $('[data-role=slider]').on('change', function(){
        Alarm01.play();
    })

});

谢谢!!!!

编辑:如果我在 extension.js 中包含 JQuery Mobile，我将获得移动网站上每个元素的两倍。因此，我得到的不是 data-role="slider"的一个元素，而是两个...

我明白了: 与此相反:

Answer 1

你快到了。正如您的代码所代表的那样，您在扩展范围内创建了音频对象。但是，要播放音频，您必须将它添加到页面范围 (HTML DOM)。因此，只需将它添加到页面正文中即可，就像这样:

appAPI.ready(function($) {
    //the link to Alarm01 is valid
    var Alarm01 = new Audio('http://localhost/playing-with-sound/jquery%20mobile%20forms/sounds/Alarm01.wav');
    // Add audio to page
    document.body.appendChild(Alarm01);
    $('input').mouseenter(function(){
        Alarm01.play();
    })
});

[披露:我是 Crossrider 员工]