Question

我正在使用CSS-Tricks的脚本，这非常简单，除了我的场景包含一个有点棘手的区域：）

剧本：

$(".myBox").click(function(){
   window.location=$(this).find("a").attr("href");
   return false;
});

这完全有效，除了我的DIV内部我有一个包含图标的跨度，需要触发工具提示但不能链接到任何地方（已经正常工作）。

我的问题：上面的脚本是否有可能在悬停子跨度时使整个DIV可以点击除外？

谢谢！

Answer 1

在您的工具提示代码中，您可以使用bubbling up停止点击event.stopPropagation()，如下所示：

$(".myBox span").click(function(e){
  e.stopPropagation();
  //show tooltip
});

这会阻止click事件从该工具提示.myBox转到父<div> <span>，这意味着您当前的.click()处理程序不会触发/重定向页面。

Answer 2

您可以将事件作为目标：

$(".myBox").click(function(e){
    if (e.target.nodeName.toUpperCase() !== 'SPAN') {
        window.location=$(this).find("a").attr("href");
        return false;
    }
 });

然而，正如尼克在评论中指出的那样，这假设跨度中没有非跨栏儿童。由于您正在插入工具提示，因此Nick的解决方案（不可避免地）是更好的方法。

Answer 3

我想我的问题是，跨度是否需要成为div的孩子？我会在div标签之前或之后放置span，将其位置设置为relative或absolute，然后将其推入div标签。像这样：

<span style="position:relative;top:-20px;left:-20px">Icon</span>
<div> Do your div stuff here </div>

这应该有效。您可能需要为跨度包含1或2的z-index，但我对此表示怀疑。这将做的是把div放在后面，并将前面的跨度;现在，跨度不会对您的点击处理程序做出反应。希望这有效！

除了悬停跨度外，整个DIV都可以点击

3 个答案: