整个DIV可点击，但悬停跨距时除外
整个DIV可点击，但悬停跨距时除外
提问于 2010-10-29 20:03:21
我使用的是CSS-Tricks编写的脚本，它非常简单，除了我的场景中包含了一些棘手的方面:)
脚本：
$(".myBox").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});这是完美的，除了在我的DIV中，我有一个包含一个图标的span，它需要触发一个工具提示，但不需要链接到任何地方(已经很好用了)。
我的问题是:上面的脚本有没有可能让整个DIV都可以点击，除非是悬停在一个子跨度上？
谢谢!
回答 3
Stack Overflow用户
回答已采纳
发布于 2010-10-29 20:05:51
在工具提示代码中，您可以使用event.stopPropagation()在bubbling up中停止单击，如下所示：
$(".myBox span").click(function(e){
e.stopPropagation();
//show tooltip
});这会阻止click事件从该工具提示<div>转到父.myBox <span>，这意味着当前的.click()处理程序不会触发/重定向页面。
Stack Overflow用户
发布于 2010-10-29 20:07:27
您可以使用事件目标：
$(".myBox").click(function(e){
if (e.target.nodeName.toUpperCase() !== 'SPAN') {
window.location=$(this).find("a").attr("href");
return false;
}
});但是，正如Nick在注释中指出的那样，这假设没有span的非span子项。由于您要插入工具提示，Nick的解决方案(不可避免地)是更好的方法。
Stack Overflow用户
发布于 2010-10-29 20:07:55
我想我的问题是，跨度是否需要是div的子级？我会将跨度放在div标记之前或之后，将其位置设置为相对或绝对，然后将其推入div标记。如下所示：
<span style="position:relative;top:-20px;left:-20px">Icon</span>
<div> Do your div stuff here </div>这应该是可行的。您可能需要在跨度中包含1或2的z索引，但我对此表示怀疑。这将做的是将div放在后面，将span放在前面；现在span将不会对您的click处理程序做出反应。希望这能起作用！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4051628
复制相关文章
相似问题
腾讯云开发者
