Question

我正在尝试开发一个试图检测页面自动点击的库。该库将在几个不同的页面上导入，一些将具有jquery，另一些将不会，或者将具有其他不同的库，因此我的解决方案应该是 vanilla 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);
        }
      }
    }   
}());

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

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>

为了测试目的，我在头部添加了检测库，而＃34; autoclick＆＃34;代码位于</body>标记后面。

我想问题出现在＆＃34;我如何附加事件处理程序＆＃34;或＆＃34;当＆＃34;，所以我问的是我该如何拦截点击事件＆＃34;肯定＆＃34;，我们的想法是拦截每个元素，现在和将来的点击，我不想阻止它们，只是一定要以某种方式拦截它们。当然，我不能拦截那些被阻止但不会冒泡的事件，但是我想尝试＆＃34;尝试＆＃34;拥有我的js＆＃34;之前＆＃34;任何其他。

你对此有一些想法吗？

jsfiddle of example

Answer 1

当没有包含其他第三方库时，使用document.onreadystatechange只能在简单场景中按预期工作。将代码包装在原生DOMContentLoaded事件中。

＆＃13;

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")
});

＆＃13;

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

＆＃13;

Answer 2

如果您查看通过点击或其他任何事件传递给该功能的事件参数，您可以查找以下内容，这是点击者在人类身上的明显标志......

event.originalEvent === undefined

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

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

Answer 3

您是否可以检查click事件以及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);

检测页面上的自动点击

3 个答案: