jQuery 或任何：可能只使 div 的一部分可点击？答案

【问题标题】：jQuery or any: Possible to make only a part of a div clickable?jQuery 或任何：可能只使 div 的一部分可点击？
【发布时间】：2013-02-26 16:08:19
【问题描述】：

是否可以只让 div 的一部分可点击——比如 clickmap/imagemap？可以用 jQuery 吗？提示：我不想编辑 html（带有 200 个单独 html 文件的滥用模板）。

【问题讨论】：

这很有可能——看第一个例子：w3schools.com/tags/tag_map.asp

标签： jquery html map area clickable

【解决方案1】：

当你的 div 被点击时，事件处理程序会接收到该事件，所以你可以测试点击的位置。

如果需要，您可能希望使用被点击的元素位置和大小，使用$(this).offset()、$(this).width() 和$(this).height()。例如：

$('mydivselector').click(function(e) {
     if (e.pageY > $(this).offset().top + 0.5*$(this).height()) {
          // bottom was clicked

     } else {
          // up of the div was clicked

     }
});

如果您想阻止默认操作和事件传播，请从事件处理程序返回 false。

【讨论】：

你应该展示如何阻止那些不应该被点击的区域的默认操作
阻止此区域执行操作。问题是，smb。想要标记文本，它们被“事件”为点击者

【解决方案2】：

您可以尝试为所有元素制作一个 jQuery 选择器，并对一些元素进行切片

var selector = "#mydiv";
var numberOfElements = $(selector).find('*').length/2; //It's just an example

$(selector).find('*').slice(0, numberOfElements).click(function()  {
 [....]//do stuff
});

【讨论】：

那么我是否将这个 div 切成相同大小的切片？好主意！
不，这只是一个想法，这只是允许您对许多元素（HTML 标签）进行切片。它不处理元素的偏移量。在我的示例中，我搜索 HTML 树的中间部分。

【解决方案3】：

您可能需要使整个 div 可点击，然后通过检查点击了哪些坐标来确定您是否愿意处理该事件。

【讨论】：

【解决方案4】：

您可以检查event object 上的offsetX 和offsetY 属性的值，如果您不喜欢它们，就决定什么都不做。

Example.

或者，如果您需要完全不触发 click 事件，您可以动态创建额外的透明 <div>s 并将它们部分放置在现有元素的前面，以便它们遮挡部分您不想响应点击。

【讨论】：

动态 div 注入对 seo 来说是不好的做法，不是吗？
@Viktor：我不知道，因为我们谈论的 div 无论如何都会是空的，所以我根本看不出它会对 seo 有何影响。