我是 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"的一个元素,而是两个...
我明白了: 与此相反:
最佳答案
你快到了。正如您的代码所代表的那样,您在扩展范围内创建了音频对象。但是,要播放音频,您必须将它添加到页面范围 (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 员工]
关于javascript - Crossrider - 如何触发页面中用户事件的事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22736120/