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

How to globally log clicks in a web app via javascript once per dom node?

本文关键字：节点 一次 dom web javascript 何通过 应用程序 记录 全局      更新时间：2023-09-26

我有一个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中，您可以这样做:

$(window).on('click', function(e)
{
    e = e instanceof jQuery ? e[0] : e;//get the real event, I believe jQ wraps the event object...
    $.ajax({method: 'post',
            data: e,
            url: 'path/to/logscript',
            success: function(response)
            {
                //this is the callback function from the vanilla JS snippet
            }
    });
}

我最终使用了一个稍微修改过的jquery函数版本，该函数对输出进行json化并进行审查(使用来自另一个示例的代码)，因为它包含循环引用(由于DOM结构)。

$(窗口)。On ('click')， function(e) {e = e instanceof jQuery ?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

当特定节点被单击时，它将记录到控制台，使用事件委托(事件冒泡)，因此只有一个(或全局)事件侦听器。

var node = document.getElementsByTagName("p")[0];
window.addEventListener("click", function (evt) {
    if (evt.target === node) {
        console.log("clicked");
    };
}, false);
在jsfiddle

在jsfiddle中点击你的问题，查看console.log

相关文章：