问题检测页面上的自动点击

我正在尝试开发一个试图检测页面自动点击的库。该库将在几个不同的页面上导入，一些将具有jquery，另一些则不会，或者将具有其他不同的库，因此我的解决方案应该是 香草javascript。

目标是有几个安全层，第一个将在javascript中，这个库不是唯一的反对自动点击的对策，但应提供尽可能多的信息。

这个想法是拦截所有人点击和 触摸事件 发生在页面上，如果这些事件是脚本生成的，会发生一些事情（应该是一个ajax调用，或者在表单上设置一个值，或者设置一个cookie或其他东西，这在这个阶段并不重要）。

我写了一个非常简单的脚本来检查计算机生成的点击：

(function(){
    document.onreadystatechange = function () {
      if (document.readyState === "interactive") {
        try{
            document.querySelector('body').addEventListener('click', function(evt) {    

                console.log("which", evt.which);
                console.log("isTrusted", evt.isTrusted);    
            }, true); // Use Capturing              
        }catch(e){
            console.log("error on addeventlistener",e);
        }
      }
    }   
}());

我看到这个在html页面上工作，没有任何其他的js，但是因为我添加了这个javascript来测试自动点击检测只是“没有”发生，没有任何我的意思是自动点击和检测。如果在控制台中使用，则以下相同的代码工作正常，并且事件被截获和评估。这是使用的脚本：

document.onreadystatechange = function () {
        if (document.readyState === "interactive") {
 //1 try
            el = document.getElementById('target');
            if (el.onclick) {
               el.onclick();
            } else if (el.click) {
               el.click();
            }
            console.log("clicked")
        }
 //2 try
        var d = document.createElement('div'); d.style.position = 'absolute'; d.style.top = '0'; d.style.left = '0'; d.style.width = '200px'; d.style.height = '200px'; d.style.backgroundColor = '#fff'; d.style.border = '1px solid black'; d.onclick = function() {console.log('hello');}; document.body.appendChild(d);
    }

html页面非常简单：

<body>
    <h1>Hello, world!</h1>
    <div id="target"> aaaaa </div>
</body>

为了测试目的，我在头部添加了检测库，而“自动点击”代码就在后面 </body> 标签。

我想问题出现在“我如何附加事件处理程序”或“何时”，所以我要问的是我可以做些什么来“拦截点击事件”，这个想法是拦截每个元素的点击，现在和将来，我不想阻止它们，只要一定要以某种方式拦截它们。当然，我无法拦截那些被阻止但不会冒泡的事件，但我想“尝试”让我的js“先于”任何其他事件。

你有一些吗？理念对这个？

jsfiddle的例子

9038

2018-03-14 10:26

起源

请不要在标题中加入标签 - Liam

请提供jsFiddle或类似的东西。谢谢。 - Mario Murrent

添加了一个js小提琴代码。 - Matteo Bononi 'peorthyr'

你的小提琴中没有添加任何库 - Martin Godzina

应该有什么图书馆？ - Matteo Bononi 'peorthyr'

答案:

运用 document.onreadystatechange 只有当没有包含其他第三方库时，才能在简单的场景中按预期工作。将代码包装在本机内部 DOMContentLoaded 事件。

document.addEventListener("DOMContentLoaded",function(){
  document.body.addEventListener('click', function(evt) {
    if (evt.target.classList.contains('some-class')) {} // not used
    console.log("which", evt.which);
    console.log("isTrusted", evt.isTrusted);
  }, true);

  //this is the autoclick code!
  el = document.getElementById('target');
  if (el.onclick) {
    el.onclick();
  } else if (el.click) {
    el.click();
  }
  console.log("clicked")
});

<html>

  <head>
    <title>Hello, world!</title>
  </head>

  <body>
    <h1>Hello, world!</h1>
    <div id="target"> aaaaa </div>
  </body>

</html>

2018-03-16 16:16

谢谢，这就是我要找的，主要的问题是“确保我的代码能够运行而不管它周围的东西是什么” - Matteo Bononi 'peorthyr'

如果您查看通过单击或其他任何事件传递给函数的事件参数，您可以查找以下内容，这是点击器不是人类的标志...

event.originalEvent === undefined

根据您的说法，我将使用以下内容来跟踪点击次数...

$(document).on("click", function(event){
    if(event.originalEvent === undefined){
       //not hooman
    }else{
       //hooman
    }
});

2018-03-17 00:44

这可能是一个想法，我肯定会将它添加到逻辑中 - Matteo Bononi 'peorthyr'

你能检查一下吗？ click 事件和a mouseup 要么 touchend 事件发生在彼此100毫秒内？如果不是，则可能是自动事件。

let mouseuportouchend = false;
let click = false;
let timer = null;

const regMouseupOrTouchend = function(){
    mouseuportouchend = true;
    if (!timer) timer = setTimer();
}

const regClick = function(){
    click = true;
    if (!timer) timer = setTimer();
}

const setTimer = function(){
    timer = setTimeout(()=>{
        if (click && mouseuportouchend) console.log("Manual");
        else console.log ("Auto");
        click=false;
        mouseuportouchend=false;
        timer=null;
    }, 100)
}
let el = document.getElementById('target');
el.addEventListener("click",regClick);
el.addEventListener("mouseup", regMouseupOrTouchend);
el.addEventListener("touchend", regMouseupOrTouchend);

2018-03-23 14:36

问题 检测页面上的自动点击

答案:

热门问题

问题检测页面上的自动点击