Question

我有一个包含大量Javascript的页面。包括流行的Twitter bootstrap的popover小部件，它不起作用。特别是如果我将鼠标悬停在应该启动“popover”的图标上。我知道HTML / JS是正确的，因为它与这个工作的jsfiddle完全相同：simple working example。

这是HTML内联：

   <span id="container">
<i id="common-actions-info" 
    class="icon-info-sign" 
    rel="popover"
    data-trigger='hover'
    data-delay={show:10,hide:500}
    data-placement="right"
    data-title="Common Actions" 
    data-content="A list of actions that you have been using frequently. Choosing any of these actions will open up a new quick entry form to add another of these items."></i>

然后我将popover javascript连接到：

$("[rel=popover]").popover();

在我更复杂的“真实环境”中，我可以运行

$（ “[相对=酥料饼]”）。酥料饼（ '显示/隐藏'）

命令，但是当我将鼠标悬停在图标上时，它只是没有让信号显示出来。无论如何，我认为问题是其他一些JS正在捕捉悬停事件并且不会触发弹出窗口的显示。

有没有一种方法可以使用Chrome的调试器来观看DOM事件并追踪这里发生的事情？

UPDATE：

我一直在查看Chrome开发者工具的“元素”标签中的“事件监听器”。虽然我对它提供的信息树仍然有点不知所措，但我已经看到了一个重要的模式：在“popover”插件工作的页面上，你会在我的小工具上找到一个“mouseover”和“mouseout”事件监听器guess负责打开和关闭小部件的显示。在不起作用的页面中，这些事件不存在（到目前为止，我所看到的是根本没有听众）。

有没有人有任何想法：

与正在设置的Bootstraps侦听器有什么冲突？
如何在不丢失头顶的头发的情况下对此进行排查？

Answer 1

您可以使用名为Firebug的Chrome / Firefox插件。

安装它，打开它，转到DOM选项卡并刷新页面。它将向您显示DOM操作，函数执行......一切的详细概述。

查看此页面：https://getfirebug.com/dom。它将为您提供Firebug DOM资源管理器的基本功能。

这也是一个很好的教程：http://www.softwareishard.com/blog/firebug/firebug-tip-log-dom-events/

编辑：

有一种方法可以捕获事件。它不是最好的解决方案，但如果其他插件/框架控制了所需的容器，它将帮助您：

假设您将点击事件绑定到i＃common-actions-info

$('i#common-actions-info').click(function() { console.log('clicked!') });

然后，您可以使用此代码来查看哪些事件绑定到i＃common-actions-info：

var clickEvents = $('i#common-actions-info').data("events").click;
jQuery.each(clickEvents, function(key, handlerObj) {
    console.log(handlerObj.handler) // will print "function() { console.log('clicked!') }"
})

调试javascript事件以使popovers工作

UPDATE：

1 个答案: