防止程序自动点击按钮

Question

防止程序自动点击按钮

5

我有以下按钮：

<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()"找到了一些线索，但在我的情况下无法实现。

- Ivan

2

为什么？如果他们要通过编程的方式点击它，那么没有任何阻止他们自己运行 document.location.href="?hash=blablah"。 - Mike Cluck

为了背景 - 你的动机是什么？你为什么担心任意脚本点击按钮？这是某种安全问题，还是可用性问题？还是只是出于好奇/学习目的？ - alexanderbird

哈希值在每次加载时都是随机的，因此它们无法自动触发。这里的动机是防止在单击按钮时自动运行脚本。 - Ivan

1

这真的是不可能的。他们只能阅读链接。 - epascarello

1

请不要阻止自动脚本点击按钮 :( 那样的网站很烦人。更好的替代方案是：限制请求以防止滥用机器人。 - William B

显示剩余3条评论

2个回答

0

试试这个：

<!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();
});
});

- 3squad

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Buddybear · Accepted Answer

您可以使用 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();
  }
}

解决方法是通过检查以下示例中的 `eventX` 和`eventY` 属性来检查 `event.isTrusted`

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

防止程序自动点击按钮

演示

HTML

JS

解决方法是通过检查以下示例中的 eventX 和eventY 属性来检查 event.isTrusted

解决方法是通过检查以下示例中的 `eventX` 和`eventY` 属性来检查 `event.isTrusted`