14

是否有任何方法可以让我检测按钮单击是否由真实用户执行，而不是用户已加载到其浏览器开发人员控制台或其他浏览器开发人员工具上的某种自动化方法 (javascript)？

我尝试了各种 stackoverflow 帖子中建议的以下方法，但它们似乎都不起作用。REF：如何检测 click() 是鼠标单击还是由某些代码触发？

脚本检测方法尝试并失败：

mybutton.click(function (e) {
    if (!e.which) {
        //Triggered by code NOT Actually clicked
        alert(' e.which - not a real button click')
    } else if ('isTrusted' in e && !e.isTrsuted) {
        //Triggered by code NOT Actually clicked
        alert(' e.isTrusted - not a real button click')
    } else if (e.originalEvent === undefined) {
        //Triggered by code NOT Actually clicked
        alert(' e.originalEvent - not a realbutton click')
    }
    //                  else if (!e.focus) {
    //                      //triggered  // does not detect e.focus on a real btn click
    //                      alert(' e.focus - not a realbutton click')
    //                  }
    else {
        // Button hopefully clicked by a real user and not a script
    }
})

如果我运行以下脚本来触发来自 Chrome 浏览器控制台的按钮单击，则上述方法都不会将其捕获为由脚本触发。

var button = document.getElementById("btnSubmit");
button.click();

==================================================== =========================

感谢您的所有回复，并感谢 stackoverflow 提供了如此出色的网站，促进了如此多的知识共享，并为我们的技术人员节省了无数小时。

看来我还是没有可靠的方法。所有 3 种浏览器（FF、IE 和 Chrome）都为用户提供了一个开发人员/控制台界面，以便在我的网页上运行/注入 javascript。似乎每种浏览器风格捕获的一些事件属性值略有不同。例如：Chrome 使用 e.screenX 捕获脚本激活 cick 和真实用户之间的差异，但在 IE 中：e.screenX 对于脚本单击（合成）和用户按钮单击具有相同的值

以下检测方法要么根本不起作用，要么在不同浏览器之间不一致： e.which e.isTrsuted e.originalEvent (event.source != window) (e.distance != null)

mousedown 事件似乎仅由真正的用户按钮单击触发，但我必须假设除了按钮单击事件之外还有一些脚本方法可以模拟 mousedown

$(me.container + ' .mybutton').mousedown(function (e) { 
    alert('mouseisdown real button click'); 
}

如果有人能找到一种可靠的方法，可以跨多个浏览器工作，检测合成（脚本）按钮单击和用户单击按钮之间的区别，那么您将获得超级英雄的地位。

4

5 回答 5

14

当通过鼠标单击按钮时，事件 e 通常会记录鼠标指针位置。尝试类似：

   if(e.screenX && e.screenX != 0 && e.screenY && e.screenY != 0){
     alert("real button click");
   }
于 2013-02-10T03:56:23.210 回答
6

不，不可能在所有情况下。

正如提到的其他答案，您可以查找鼠标坐标（clientX/Y 和 screenX/Y），如果它们不存在，您可以假设它可能不是人为生成的操作。

但是，如果用户在按钮上制表并使用空格键单击它，或者不使用鼠标单击它，则坐标也将为零，并且此方法将错误地确定它是脚本单击。

此外，如果脚本使用dispatchEvent而不是click，则可以为事件提供坐标。在这种情况下，此方法会错误地将其识别为用户生成的点击。

// This will produce what appears to be a user-generated click.
function simulateClick(element) {
  var evt = document.createEvent("MouseEvents");
  evt.initMouseEvent("click", true, true, window,
    0, 110, 111, 10, 11, false, false, false, false, 0, null);
  element.dispatchEvent(evt);
}

http://jsfiddle.net/bYq7m/

于 2013-02-10T04:38:49.600 回答
5

出于安全考虑，当您使用 javascript 触发事件时，它的注册方式与用户触发事件时不同。控制台记录ev对象，您将看到两种情况之间的显着差异。

mybutton.click(function(ev) {
  console.log(ev);
});

以下是这两种情况的一些示例输出：

jQuery.Event
currentTarget: button
data: null
delegateTarget: button
handleObj: Object
isTrigger: true
jQuery191011352501437067986: true
namespace: ""
namespace_re: null
result: undefined
target: button
timeStamp: 1360472753601
type: "mousedown"
__proto__: Object

jQuery.Event {originalEvent: MouseEvent, type: "mousedown", isDefaultPrevented:     function, timeStamp: 1360472840714, jQuery191011352501437067986: true…}
altKey: false
bubbles: true
button: 0
buttons: undefined
cancelable: true
clientX: 39
clientY: 13
ctrlKey: false
currentTarget: button
data: null
delegateTarget: button
eventPhase: 2
fromElement: null
handleObj: Object
isDefaultPrevented: function returnFalse() {
jQuery191011352501437067986: true
metaKey: false
offsetX: 37
offsetY: 11
originalEvent: MouseEvent
pageX: 39
pageY: 13
relatedTarget: null
screenX: 1354
screenY: 286
shiftKey: false
target: button
timeStamp: 1360472840714
toElement: button
type: "mousedown"
view: Window
which: 1
__proto__: Object
于 2013-02-10T03:42:52.350 回答
1

小提琴在这里。

$("button").mousedown( function(e) {
    if(e.which) {
        alert(1);
    }
});
$("button").trigger("mousedown");

或 Javascript：

document.getElementsByTagName('button')[0].onmousedown = function(e) {
 if(e.which) {
    alert(1); // original click
 }
}
document.getElementsByTagName('button')[0].onmousedown();

您可以在小提琴中看到，它不会让触发函数调用，但只有当鼠标按下按钮时才会调用。如果在按钮上触发了自动单击，则e.which未定义，很容易被捕获。

更新： Javascript的小提琴

于 2013-02-10T03:44:07.603 回答
1

Use "event.isTrusted" to know event is triggered from Javascript or User click.

Sample Code:

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>

  <input type="text" id="myInput">
  <button id="myBtn" onclick="callFunction(event)">Click Me</button>

  <script>
    function callFunction(event) {
      console.log(event.isTrusted); // true only when user clicks 'Click Me' button
    }
    window.onload = function () {
      let event = new Event("click");
      callFunction(event); // false
    }
    var input = document.getElementById("myInput");
    // Execute a function when the user releases a key on the keyboard
    input.addEventListener("keyup", function (event) {
      if (event.keyCode === 13) {
        event.preventDefault();
        document.getElementById("myBtn").click(); // false
      }
    });
  </script>

</body>

</html>
于 2020-11-04T06:09:52.850 回答