blocks|key|2001015|text|在工具提示代码中，您可以使用event.stopPropagation()在bubbling+up中停止单击，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2001016|$(".myBox+span").click(function(e){
++e.stopPropagation();
++//show+tooltip
});|code-block|syntax|javascript|2001017|这会阻止click事件从该工具提示<div>转到父.myBox+，这意味着当前的.click()处理程序不会触发/重定向页面。|2001018|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/event.stopPropagation/|1|http://www.quirksmode.org/js/events_order.html|2|http://api.jquery.com/click/^0|E|N|E|N|0|12|B|1|0|0|4|5|H|5|P|6|W|6|1A|8|1A|8|2|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]|$9|14|A|15|1|16]]|E|$]]|$1|F|3|G|5|H|7|17|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|18|8|@$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]]|D|@$9|1J|A|1K|1|1L]]|E|$]]|$1|M|3|-4|5|6|7|1M|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]|U|$5|P|Q|R|E|$S|V]]|W|$5|P|Q|R|E|$S|X]]]]

In your tooltip code you can stop the click from <a href="http://www.quirksmode.org/js/events_order.html">bubbling up</a> using <a href="http://api.jquery.com/event.stopPropagation/"><code>event.stopPropagation()</code></a>, like this:

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

This stops the <code>click</code> event from going to the parent <code>.myBox</code> <code>&lt;div&gt;</code> from that tooltip <code>&lt;span&gt;</code>, meaning that your current <a href="http://api.jquery.com/click/"><code>.click()</code></a> handler won't fire/redirect the page.

blocks|key|3468900|text|您可以使用事件目标：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3468901|$(".myBox").click(function(e){
++++if+(e.target.nodeName.toUpperCase()+!==+'SPAN')+{
++++++++window.location=$(this).find("a").attr("href");
++++++++return+false;
++++}
+});|code-block|syntax|javascript|3468902|但是，正如Nick在注释中指出的那样，这假设没有span的非span子项。由于您要插入工具提示，Nick的解决方案(不可避免地)是更好的方法。|3468903|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You could the event target:

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

However, as Nick points out in the comments, this assumes that there will be no non-span children of the span. Since you are inserting a tooltip, Nick's solution is (inevitably) the better way to go.

blocks|key|1253625|text|我想我的问题是，跨度是否需要是div的子级？我会将跨度放在div标记之前或之后，将其位置设置为相对或绝对，然后将其推入div标记。如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1253626|<span+style="position:relative;top:-20px;left:-20px">Icon
<div>+Do+your+div+stuff+here+</div>|code-block|syntax|javascript|1253627|这应该是可行的。您可能需要在跨度中包含1或2的z索引，但我对此表示怀疑。这将做的是将div放在后面，将span放在前面；现在span将不会对您的click处理程序做出反应。希望这能起作用！|1253628|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I guess my question would be, does the span need to be a child of the div? I would put the span before or after the div tag, set its position to relative or absolute, then push it into the div tag. Like so:

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

This should work. You might need to include a z-index of 1 or 2 for the span, but I doubt this. What this will do is put the div in behind, and the span in front; now the span won't react to your click handler. Hope this works!

I am using a script by CSS-Tricks, which is pretty straightforward except my scenario includes a little tricky area :)

The script:

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

This works perfectly except inside my DIV I have a span containing an icon that needs to trigger a tooltip but not link anywhere (already working fine).

My question:
Is it possible for the above script to make the whole DIV clickable EXCEPT while hovering a child span?

Thank you!

Whole DIV clickable except while hovering a span

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我使用的是CSS-Tricks编写的脚本，它非常简单，除了我的场景中包含了一些棘手的方面:)脚本：$(".myBox").click(function(){   window.location=$(this).find("a").attr("href");   return false;});这是完美的，除了在我的DI...

问整个DIV可点击，但悬停跨距时除外
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问整个DIV可点击，但悬停跨距时除外EN