【问题标题】：Prevent button from being clicked programmatically防止以编程方式单击按钮
【发布时间】：2017-02-23 17:54:25
【问题描述】：

我有以下按钮：

<input type="button" disabled onClick=document.location.href="?hash=blabla" tabindex="-1" class="btn btn-transparent btn-xs cbut0" />

现在该按钮被禁用并使用另一个脚本在鼠标悬停事件时重新启用它，但似乎用户仍然可以通过加载简单的外部 javascript 以编程方式单击该按钮，例如：

window.onload = setTimeout(function(){
$('input.btn.btn-transparent').click();
}, 10000);

有什么方法可以防止这种行为，以某种方式确保按钮是由鼠标而不是某些脚本单击的？

我在 Disabled button still fires using ".click()" 找到了一些线索，但在我的案例中未能实施。

【问题讨论】：

为什么？如果他们打算以编程方式单击它，那么没有什么能阻止他们自己运行document.location.href="?hash=blablah"。
对于上下文 - 动机是什么？您为什么担心单击按钮的任意脚本？这是某种安全问题，还是可用性问题？还是只是好奇/学习？
哈希值在每次加载时都是随机的，因此它们无法自动触发。这里的动机是防止点击按钮时自动执行脚本。
真的不可能。他们可以阅读链接。
请不要阻止自动脚本点击按钮 :( 这样做的网站很痛苦。更好的选择：限制请求以防止滥用机器人攻击

标签： javascript button

【解决方案1】：

您可以使用event 的isTrusted 属性。看看MDN。

Event 接口的 isTrusted 只读属性是一个布尔值，当事件由用户操作生成时为 true，当事件由脚本创建或修改或通过 dispatchEvent 分派时为 false。

演示

function changeHash(event) {
  if (event.isTrusted) {
    alert("Trusted");
  } else {
    alert("Programmatically triggered");
  }
}

function triggerClick() {
  document.getElementById('btn').click();
}

<input type="button" id="btn" onClick="changeHash(event)" tabindex="-1" class="btn btn-transparent btn-xs cbut0" value="change">

<button onclick="triggerClick()">Trigger click</button>

以下是检查事件是否为可信事件的示例代码。

if ('isTrusted' in event) {
  if (event.isTrusted) {
    alert('The ' + event.type + ' event is trusted.');
  } else {
    alert('The ' + event.type + ' event is not trusted.');
  }
} else {
  alert('The isTrusted property is not supported by your browser');
}

因此，您可以使用此代码更改您的代码，如下所示。

HTML

<input type="button" disabled onClick = "changeHash()" tabindex="-1" class="btn btn-transparent btn-xs cbut0" />

JS

changeHash(event) {
  if (event.isTrusted) {
    document.location.href = "?hash=blabla"
  } else {
    event.preventDefault();
  }
}

`event.isTrusted` 的解决方法是检查 `eventX` 和 `eventY` 属性，如下所示

changeHash(event) {
  if (event.screenX && event.screenY && event.screenX != 0 && event.screenY != 0) {
    document.location.href = '?hash=blabla';
  } else {
    event.preventDefault();
  }
}

【讨论】：

我现在正在应用这个。感觉积极 :) 将在一分钟内反馈。
不幸的是它不起作用。单击按钮时在控制台出现以下错误：Uncaught ReferenceError: changeHash is not defined at HTMLInputElement.onclick
啊，我把它放在了页眉中……当我把它移到它应该在的地方时，它完美地工作了。非常感谢，非常感谢！
如果你把你的js代码包裹在document.addEventListener('DOMContentLoaded', function(){ // Your code goes here });中，你可以把它放在任何地方

【解决方案2】：

试试这个：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <title>JS Bin</title>
</head>
<body>
  <input type="button"  onmousedown="mouseDown()" value="click me" id="btn">
    <input type="button" value="Btn2" id="btn2">
  <p id="prevented"></p>
</body>
</html>

JS：

function mouseDown() {
    alert("MD");
}
$(document).ready(function() {
$("#btn").click(function(evt) {
    evt.preventDefault();
    //prevented click at time:
    $("#prevented").text(new Date());
});

$("#btn2").click(function() {
  $("#btn").click();
});
});

【讨论】：

演示

HTML

JS

event.isTrusted 的解决方法是检查 eventX 和 eventY 属性，如下所示

`event.isTrusted` 的解决方法是检查 `eventX` 和 `eventY` 属性，如下所示