我有一个带有title
属性的元素(即工具提示),包含在某个容器中:
<div id="foo">
<input type="text" title="A tooltip" />
</div>
我在容器上附加了一个"mousemove"
事件监听器并停止事件传播:
document.getElementById('foo').addEventListener(
'mousemove',
function(e) { e.stopPropagation() },
false
)
这种阻止“鼠标移动”在容器上传播的组合现在可以防止工具提示出现在内部文本框中,在Firefox 2及更高版本中。我尝试过FF 2 [.0.0.20],3 [.0.11]和最新的3.5(Windows Server 2003,XP)。
作为一个快速练习, Firefox 用户可以通过在地址栏中运行上述等效逻辑来查看此错误:
javascript:void($('div.vote').mousemove(function(e){ e.stopPropagation() }))
现在鼠标悬停在此问题的任何投票,投票或明星(收藏)图标上。工具提示不再出现。 同样,仅限Firefox 。
有没有人对Firefox中的这种行为/错误有解决方法?还有其他人见过这个吗?
更新:Firefox似乎使用“鼠标停止移动”来触发浏览器镶边中的工具提示(例如后退/前进按钮)。见https://bugzilla.mozilla.org/show_bug.cgi?id=82953。但是我无法判断这是否会影响DOM。
更新:Firefox 10是显示此行为的最后一个版本。 Firefox 11.0及更高版本显示工具提示,无论事件传播如何。
更新:Firefox 33(.1)不再出现此行为。
答案 0 :(得分:1)
我已经证实了这个问题。我甚至尝试使用以下代码手动将事件传播到 输入框:
<div id="foo" title="A tooltip 2"> <input title="A tooltip" type="text" id="bar"/>
</div>
<script type="text/javascript">
document.getElementById('foo').addEventListener(
'mouseover',
function(e) {
e.stopPropagation();
if (document.createEvent) {
var inputBox = document.getElementById('bar');
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("mousemove", true, true, window, e.detail, e.screenX, e.screenY, e.clientX, e.clientY, false, false, false, false, null, null);
inputBox.dispatchEvent(evt);
}
},
false
)
</script>
没有骰子。但是,其他鼠标事件(包括鼠标悬停)似乎工作正常。
我相信这是一个错误。虽然它没有在bugzilla中列出,但在“鼠标悬停”事件和工具提示之间进行搜索似乎indicate a correlation。
您可以在此处下载最新的nightly build Firefox,看看它是否仍然存在。如果是,file a bug。
作为替代方案,我会看看mouseover是否可以为您提供所需的效果。
答案 1 :(得分:0)
我最近看到一些firefox addOns(即谷歌工具栏)导致标题工具提示出现问题。停用它们并检查这是否解决了您的问题。