如何通过javascript在每个dom节点上全局记录web应用程序中的单击次数？

我有一个web应用程序，我希望在自动测试期间通过注册一个全局javascript侦听器来调试它，该侦听器将在每次单击给定dom节点时发出一次日志事件或类似事件。我不在乎解决方案是纯javascript还是使用其中一个框架。这是一种轻量级的方法吗？

不知道您想要记录什么，或者记录在哪里，但也许这就是您需要的：

window.addEventListener('click',function(e)
{
    console.log(e);
    //or
    var xhr = new XMLHttpRequest();
    xhr.open('post', 'url/to/logscript', true);
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencode');//or application/json
    var data = {node: (e.target || e.srcElement).tagName,
                other: (e.target || e.srcElement).baseURI};
    xhr.onreadystatechange = callback;//<-- define your own, or leave as is
    xhr.send(data);//serialize or JSON.stringify
},false);

最后，我使用了jquery函数的一个稍加修改的版本，JSON对输出进行过滤和审查（使用另一个示例中的代码），因为它包含循环引用（由于DOM结构）

$（窗口）。在（'单击'）上，函数（e）{ e=e jQuery的instanceof？e[0]：e；//获取真实事件，我相信jQ包装了事件对象

    $.ajax({method: 'post',
            data: JSON.stringify(e, censor(e)),
            url: 'debug',
            success: function(response) {
                //this is the callback function from the vanilla JS snippet
            }
    });
});

function censor(censor) {
  return (function() {
    var i = 0;

    return function(key, value) {
      if(i !== 0 && typeof(censor) === 'object' && typeof(value) == 'object' && censor == value)
        return '[Circular]';

      if(i >= 29) 
        return '[Unknown]';

      ++i; 

      return value;
    }
  })(censor);
}

后端的rails控制器如下所示：

class DebugController < ApplicationController
  def index
    puts params['data']
  end
end

class-DebugController

这将在单击特定节点时记录到控制台，使用事件委派（事件冒泡），因此只有一个（或全局）事件侦听器

var node = document.getElementsByTagName("p")[0];

window.addEventListener("click", function (evt) {
    if (evt.target === node) {
        console.log("clicked");
    };
}, false);

在

---

只需点击JSFIDLE中的问题并查看控制台。log

您可以用一些HTML和您尝试过的任何javascript来扩展您的需求吗？在您的javascript示例中，您似乎缺少

，false）

。此外，我认为jquery中首选

.get（0）

，而不是

[0]

我想知道如果

e

包含循环引用会发生什么？@Xotic750:为什么要调用一个函数，它只返回数组的第一个元素？这只是增加了开销…是的，我只是认为这是jquery首选的方式，因为这是一个jquery解决方案…，我想这意味着为什么要使用jquery:）@Xotic750：“为什么要使用jQ？”，…我不使用它，所以我倾向于不使用jQ的首选方式：）这适用于我测试的Chrome v25、Chrome v27和FireFox v20，你使用的浏览器是什么？我刚刚测试了Opera v12.14，这也可以使用。版本25.0.1364.160 Ubuntu 12.04（25.0.1364.160-0ubuntu0.12.04.1）那么应该没有问题了，我想你可能正在使用IE8或更早版本，这需要稍微不同的语法，对吗？@Xotic750:也许OP没有使用

onload

或

readystatechange

处理程序将DOM引用分配给

节点

？无论如何，你的小提琴对我来说也很好

var node = document.getElementsByTagName("p")[0];

window.addEventListener("click", function (evt) {
    if (evt.target === node) {
        console.log("clicked");
    };
}, false);