Question

我目前有一个div，我们称之为#videodiv，其中包含一个HTML5视频播放器（SublimeVideo，但这可能是无关的信息）。在页面加载时，#videodiv仅为100px。当用户点击#videodiv内的任何位置时，我希望jQuery将div扩展为250px。

您可能会说 - 这就像jQuery函数一样简单，只需使用click然后动画！你是对的，除了......

问题出在此处：#videodiv中包含的HTML5视频播放器会填充整个div，以捕获发生的所有点击。这样做是为了触发播放器的播放/暂停功能，但随后不允许任何程序员为包含div设置jQuery点击功能。

幸运的是，在这种情况下，#videodiv是一个100％的全身宽div，精确高度为100px。因此，考虑到上述问题，另一种方法是确定我们是否可以捕获页面前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/

Answer 2

我已经解决了这个问题，并在另一个StackOverflow问题上提供了以下答案：Detect when an HTML5 video finishes

这只是两个步骤：

使用jQuery检测onplay
运行jQuery函数

如您所见，HTML5非常简单;我只希望文档更容易访问/搜索。

jQuery - 检测单击某个像素区域，然后执行功能

2 个答案: