防止按钮以编程方式被点击
[英]Prevent button from being clicked programmatically
问题描述
I have the following button:
我有以下按钮：
<input type="button" disabled onClick=document.location.href="?hash=blabla" tabindex="-1" class="btn btn-transparent btn-xs cbut0" />
Now the button is disabled and using another script to re-enable it on mouse-over event, however it seems users can still click the button programmatically by loading a simple external javascript such as:现在该按钮被禁用并使用另一个脚本在鼠标悬停事件时重新启用它，但是似乎用户仍然可以通过加载一个简单的外部 javascript 以编程方式单击该按钮，例如：
window.onload = setTimeout(function(){
$('input.btn.btn-transparent').click();
}, 10000);
Is there any way to prevent this behavior, somehow making sure the button is clicked on by a mouse and not by some script?有什么办法可以防止这种行为，以某种方式确保按钮是由鼠标而不是由某些脚本点击的？
I found some leads at Disabled button still fires using ".click()" but failed to implement it in my case.我发现禁用按钮上的一些线索仍然使用“.click()”触发，但在我的情况下未能实现。
2 个解决方案
解决方案1
10 已采纳 2017-02-23 18:02:04
You can make use of isTrusted property of event .您可以使用event的isTrusted属性。 Have a look at MDN .看看MDN 。
The isTrusted read-only property of the Event interface is a boolean that is true when the event was generated by a user action, and false when the event was created or modified by a script or dispatched via dispatchEvent.
Demo演示
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>
Below is the sample code to check whether the event is trusted event.下面是检查事件是否为可信事件的示例代码。
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');
}
So with this code you can change your code like below to get it working.因此，使用此代码，您可以像下面一样更改代码以使其正常工作。
HTML HTML
<input type="button" disabled onClick = "changeHash()" tabindex="-1" class="btn btn-transparent btn-xs cbut0" />
JS JS
changeHash(event) {
if (event.isTrusted) {
document.location.href = "?hash=blabla"
} else {
event.preventDefault();
}
}
Workaround for event.isTrusted is to check for eventX and eventY properties as shown below 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();
}
}
解决方案2
0 2017-02-23 18:14:10
Try this:尝试这个：
<!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: 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();
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.