javascript 检测按钮单击是真实的用户还是由脚本触发

exdqitrt 于 2023-01-16 发布在 Java

关注(0)|答案(6)|浏览(255)

有没有什么方法可以让我检测到一个按钮点击是否是由一个真实的用户执行的，而不是用户加载到他们的浏览器开发者控制台或其他浏览器开发者工具上的一些自动化方法（javascript）？
我尝试了以下在stackoverflow的帖子中建议的方法，但是没有一个看起来有效。How to detect if a click() is a mouse click or triggered by some code?
尝试的脚本检测方法失败：

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的真实用户之间的差异，但在IE中：即screenX对于脚本点击（合成）和用户按钮点击具有相同的值
以下检测方法要么根本不起作用，要么在不同的浏览器中不一致：即，哪个是被接受的，原始事件（事件源!=窗口）（距离!=空）
mousedown事件似乎只由真实用户的按钮单击触发，但我必须假设除了按钮单击事件之外，还有一些脚本方法可以模拟mousedown

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

如果有人能找到一种可靠的方法，可以跨多个浏览器工作，可以检测合成（脚本）按钮点击和用户按钮点击之间的差异，那么你将当之无愧地成为超级英雄。

JavaScript

来源：https://stackoverflow.com/questions/14794380/detect-if-button-click-real-user-or-triggered-by-a-script

6条答案

按热度按时间

carvr3hs1#

当鼠标点击按钮时，事件e通常会记录下鼠标指针的位置。2尝试如下操作：

if(e.screenX && e.screenX != 0 && e.screenY && e.screenY != 0){
     alert("real button click");
   }

赞(0）回复(0）举报 2023-01-16

fdx2calv2#

不，不是所有情况下都可能。
正如其他答案所提到的，您可以查找鼠标坐标（clientX/Y和screenX/Y），如果它们不存在，您可以假设它 * 可能 * 不是人类生成的操作。
但是，如果用户用Tab键跳到按钮上并使用空格键单击它，或者不使用鼠标单击它，则坐标也将为零，并且此方法将错误地将其确定为脚本单击。
此外，如果脚本使用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/

赞(0）回复(0）举报 2023-01-16

s4chpxco3#

出于安全考虑，当您使用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

赞(0）回复(0）举报 2023-01-16

sh7euo9m4#

使用"event. isTrusted"了解事件是通过Javascript或用户点击触发的。
样本代码：

<!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>

赞(0）回复(0）举报 2023-01-16

woobm2wo5#

这里。

$("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是未定义的，这可以很容易地陷入。

更新：Fiddle For Javascript

赞(0）回复(0）举报 2023-01-16

fsi0uk1n6#

事件对象具有包含isTrusted字段的nativeEvent对象。
当事件不是真实的用户触发时，其值为false，所以可以通过以下方式检查是否是真实用户点击了按钮-

if(event.nativeEvent.isTrusted){
    //Real user
} else {
    //Triggered by script
}

赞(0）回复(0）举报 2023-01-16

我来回答

javascript 检测按钮单击是真实的用户还是由脚本触发

6条答案

相关问题

热门标签

最新问答