Question

我正在开发一个Chrome扩展业务游戏化系统，该系统可以跟踪各种Web应用程序中的用户，并跟踪他们在应用程序中的进度，以确定其工作场所中的用户排名。

我知道您可以使用以下内容跟踪创建的元素：

window.addEventListener('DOMNodeInserted', function(e){
  console.log(e.target);
}, false);

但由于这可能非常缓慢（复杂的Web应用程序中明显滞后），我想只检测因鼠标点击而产生的元素（例如，在元素上）。

我刚刚在本地进行了测试：

<!DOCTYPE html>
<html>
<body>

    <div id="creator">Click me</div>

    <script>

        var click_event = 0;

        function add_element(e)
        {
            console.log(e);
            click_event = e;
            var div = document.createElement('div');
            div.innerHTML = "created";
            document.body.appendChild(div);
        }

        function element_created(e)
        {
            console.log(e);
            if(e == click_event)
            {
                console.log("SAME EVENT");
            }
        }

        document.getElementById('creator').addEventListener('click', add_element, false);
        window.addEventListener('DOMNodeInserted', element_created, false);

    </script>

</body>
</html>

希望事件是相同的，或者在检查DOMNodeInserted事件时，我找到了一些从插入事件的属性中提取原始点击事件的方法。但是，我在插入事件的属性中找不到任何将其链接到click事件的内容。

有没有办法找到哪个事件使用JavaScript触发了DOMNodeInserted事件？

Answer 1

当您从javascript插入元素时使用自定义事件，但仅基于事件“DOMNodeInserted”，这是不可能的，您仍然可以在元素<div insertedwith="click">上使用自定义属性并检查"DOMNodeInserted"处理程序是否e.target具有该属性。无论如何检查这个例子，希望对你有帮助。

console.clear();
        function add_element_working(e)
        {
            var div = document.createElement('div');
            div.onload = function() {
  console.log("Script loaded and ready");
};
            div.innerHTML = "This is tracked with custom event";
            
            event = document.createEvent("HTMLEvents");
    	    event.initEvent("InsertedFromClick", true, true);
            
            document.body.appendChild(div);
            div.dispatchEvent(event);
        }

function add_element_notworking(e)
        {
            var div = document.createElement('div');
            div.innerHTML = "This is not tracked";
            document.body.appendChild(div);
        }

        function element_created(e)
        {
            console.log("Inserted element not knowing who trigered");
            console.log(e);
            
        }
		
	    function element_created_custom(e)
        {
            console.log("Click inserted element traked");
            console.log(e);
            
        }

        document.getElementById('creator').addEventListener('click', add_element_working, false);
document.getElementById('creator2').addEventListener('click', add_element_notworking, false);
        
window.addEventListener('DOMNodeInserted', element_created, false);


window.addEventListener('InsertedFromClick', element_created_custom, false);

<div id="creator">Click me to check that tracked</div>
<div id="creator2">Click me to check that I'm not tracked</div>
<div>HTML</div>

JavaScript - 检测click事件是否触发了DOMNodeInserted事件

1 个答案: