以编程方式单击防止按钮

时间:2017-02-23 17:54:26

标签: javascript button

我有以下按钮:

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

任何指针都将不胜感激。 谢谢。

2 个答案:

答案 0 :(得分:5)

您可以使用isTrusted的{​​{1}}属性。 看看MDN

  

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

演示

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

因此,使用此代码,您可以更改下面的代码,以使其正常工作。

HTML

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

JS

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

changeHash(event) { if (event.isTrusted) { document.location.href = "?hash=blabla" } else { event.preventDefault(); } } 的解决方法是检查event.isTrustedeventX属性,如下所示

eventY

答案 1 :(得分: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();
});
});