jQuery - 检测特定像素区域的点击，然后执行功能

Posted 2023-05-07

【中文标题】jQuery - 检测特定像素区域的点击，然后执行功能

【英文标题】：jQuery - Detect click in certain pixel area, then execute function

【发布时间】：2013-02-05 22:10:13

【问题描述】：

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

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

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

幸运的是，在这种情况下，#videodiv 是一个 100% 全身宽度的 div，并且具有 100 像素的精确高度。因此，考虑到上面的问题，另一种方法是确定我们是否可以捕获发生在页面前 100 个像素中的任何点击HTML 文档（而不是 div），然后触发函数。

换句话说，我们如何使用 jQuery 来检测页面前 100 个像素内的任意位置的鼠标点击，然后将 div videodiv 设置为 250px？

替代/更好的解决方案绝对非常受欢迎，但 jQuery 是首选方法。

【参考方案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/

【讨论】：

只需将该视频大小调整逻辑设置为一个函数，并将其绑定到 body click 以及 video.play() 事件。然后这两个动作都会调整 div 的大小。

【参考方案2】：

我已经通过一个单独的 *** 问题提供的以下答案解决了这个问题，位于此处：Detect when an HTML5 video finishes

只需两步：

使用 jQuery 检测 onplay 运行 jQuery 函数

如您所见，HTML5 极其简单；我只希望文档更易于访问/搜索。