我目前有一个 div,我们称它为 #videodiv
,其中包含一个 HTML5 视频播放器( SublimeVideo ,但这可能是不相关的信息)。在页面加载时,#videodiv
只有 100px。当用户单击 #videodiv
中的任意位置时,我希望 jQuery 将 div 扩展到 250px。
您可能会说——这就像 jQuery 函数一样简单,只需使用点击然后制作动画!你是对的,除了......
问题在于:包含在 #videodiv
中并填充整个 div 的 HTML5 视频播放器会捕获发生的所有点击。这样做是为了触发播放器的播放/暂停功能,但随后不允许任何程序员为包含的 div 设置 jQuery 点击功能。
幸运的是,在这种情况下,#videodiv
是一个 100% 完全宽度的 div,并且具有 100 像素的精确高度。因此,考虑到上述问题,另一种方法是弄清楚我们是否可以捕获在页面前 100 个像素中发生的 HTML 文档(而不是 div)中的任何点击,然后触发函数。
换句话说,我们如何使用 jQuery 检测页面前 100 像素内任意位置的鼠标点击,然后将 div videodiv
设置为 250px?
替代/更好的解决方案绝对非常受欢迎,但 jQuery 是首选方法。
最佳答案
像这样的东西应该可以工作 - 更改宽度和高度值以满足您的需要。 pageX
是横向的,pageY
是垂直的,所以我只是在左上角映射了一个 100x100 的空间。更改它以满足您的需求:
// Bind the click event to the body - any static parent container will do
$('body').on('click', function(e) {
// Fire the callback if the click was in the top 100px by 100px
if (e.pageX <= 100 && e.pageY <= 100) {
// Prevent crazy animations and redundant handling
$(this).off('click');
// Scale the video to the appropriate size
$('#videodiv').animate({
width : '250px',
height : '250px'
}, 1000);
}
});
这是一个演示:http://jsfiddle.net/bKm4U/
关于javascript - jQuery - 检测点击某个像素区域,然后执行函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14987805/