javascript - jQuery - 检测点击某个像素区域，然后执行函数

Question

我目前有一个 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 是首选方法。

Answer 1

像这样的东西应该可以工作 - 更改宽度和高度值以满足您的需要。 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/