![](/img/trans.png)
[英]Javascript/JQuery: how to add keypress/blur event that doesn't trigger twice with alert box? IE only
[英]jquery on trigger keypress event twice
我正在制作视频播放器,我想控制一些基本的视频动作,如播放,暂停,通过键盘搜索。 所以这是我用于获取键盘事件的代码。
$("#video_container_div").on("keypress", function (e) {
e.preventDefault();
e.stopPropagation();
switch (e.which) {
case 32:
{ // space
console.info("I am in keyboard controls");
$("#playpausebtn").click();
break;
}
default:
return;
}
});
$("#fullscreenbtn").click(function () { //bind click event on fullscreen button
console.info("I am in fullscreen")
fullscreenFun();
});
现在我面临的问题是,如果用户点击全屏按钮然后按空格键,则事件会两次触发。 http://202.164.44.244/products/trunk/video_player/sample1.htm首先它播放/暂停视频然后自动触发全屏或任何最后一个焦点事件。
如果我按下全屏按钮然后按空格键,则控制台显示:
I am in fullscreen
I am in keyboard controls
I am in fullscreen
在另一个堆栈问题中,有人给出了类似问题的答案
这是播放器的链接:
http://202.164.44.244/products/trunk/video_player/sample1.htm
但我需要具体解决这个问题。 这个问题已经花了我一整天。
最终编辑:道歉这需要一点,这是午夜,我有点累了。
你正在使用错误的活动! 忽略我刚才说的重点和只需更换"keypress"
与"keydown"
,它应该工作的罚款。 焦点将保留在fullscreenbtn上,但您的事件将正常工作, e.stopPropagation()
将足以防止事件多次触发。 您的代码应为:
$("#video_container_div").on("keydown", function (e) {
e.preventDefault();
e.stopPropagation();
switch (e.which) {
case 32:
{ // space
console.info("I am in keyboard controls");
$("#playpausebtn").click();
break;
}
default:
return;
}
});
$("#fullscreenbtn").click(function () { //bind click event on fullscreen button
console.info("I am in fullscreen")
fullscreenFun();
});
我觉得你在多次触发事件时使用stopPropagation有些奇怪。
值得注意的是,这只会在video_container_div
或其中的元素被聚焦时触发。 "keydown"
和"keypress"
需要在不使用JavaScript的情况下触发焦点(例如,如果你想要你可以调用.trigger("keydown")
)。 如果有人专注于页面上的另一个元素或刚刚打开页面(没有任何焦点),那么"keydown"
事件将不会触发。
当您单击全屏按钮然后将全屏按钮置于焦点时,所以当您点击空格键时,它会触发您所做的按键事件并计为单击,因为许多浏览器会考虑空格或输入按键作为点击是焦点。
尝试添加
$("#video_container_div").focus();
到你的结束
$("#fullscreenbtn").click(function () {
从fullscreenbtn元素中移除焦点并查看它是否仍然触发两次的事件。
编辑:看看你的网站上的确切代码,我添加了这个,它对我有用
$(h + t.$fulScrnBtn).click(function () { //bind click event on fullscreen button
fullscreenFun();
$(h + t.$plyBtn).focus();
});
这个工作的原因并不是你想要的最终结果。 所有这一切都使得播放/暂停按钮处于焦点,所以当有人按下空格键时,浏览器会将其视为单击按钮,而不是因为有人在关注视频时按下了空格。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.