如何在鼠标悬停时使按钮可点击
[英]How to make a button clickabled when hovered over
问题描述
This question is going to sound strange to many of you.
这个问题对你们中的许多人来说听起来很奇怪。 I need a button where it can't be triggered by a click.我需要一个不能通过点击触发的按钮。 That means it won't do an action.这意味着它不会执行任何操作。 Like if the form attribute action is set to something like next.html the click won't cause it to go to the next page.就像如果表单属性action设置为next.html之类的东西，点击不会导致它转到下一页。
And when the user hovers over the button, it can go to the next site.当用户将鼠标悬停在按钮上时，它可以转到下一个站点。 The reason why I am doing this is because a bot can submit data without hovering over the button .我这样做的原因是因为机器人可以在不将鼠标悬停在按钮上的情况下提交数据。 I am hoping this will prevent bots from submitting anything into my site.我希望这会阻止机器人向我的网站提交任何内容。
I don't really have any code, but is there any way to do this in Javascript/jQuery?我真的没有任何代码，但是有什么方法可以在 Javascript/jQuery 中做到这一点吗？
If this confusing please ask more questions in the comments and I will try to answer to the best of my capabilities.如果这令人困惑，请在评论中提出更多问题，我会尽力回答。
4 个解决方案
解决方案1
1 2016-10-11 17:02:37
- Bots search for the
<form>element机器人搜索<form>元素 - Bots query for the form's
actionvalue机器人查询表单的action值
Bots won't follow your form action if there's no form in your page.如果您的页面中没有表单，机器人将不会跟随您的表单action 。 If that might sound strange:如果这听起来很奇怪：
- Create your entire form using JS ( No form? No bots. )使用 JS 创建整个表单（没有表单？没有机器人。 ）
Either way (specially if you care about noJS visitors) you need to validate your form无论哪种方式（特别是如果您关心 noJS 访问者），您都需要验证您的表单
- on server side (that's what matter the most)在服务器端（这是最重要的）
- on client side (JavaScript; notify your users if they forgot to fill something - typos)在客户端（JavaScript；如果他们忘记填写某些内容，请通知您的用户 - 错别字）
Here you can find an approach example
在这里你可以找到一个方法示例
Why your hover approach/intent is bad:为什么你的hover方法/意图不好：
- You'll be only messing with UI creating a bad UX.您只会弄乱 UI，从而造成糟糕的 UX。 Nothing more.而已。
- The form is already there on the page revealing all what a bot needs.该表单已经存在于页面上，显示了机器人需要的所有内容。
- The bot does not need any button to submit your form.机器人不需要任何按钮来提交您的表单。
- Some users might use the TAB key to focus the SUBMIT button - so there's no hover involved whatsoever, just a poor form that does not work as it should.一些用户可能会使用 TAB 键来聚焦提交按钮 - 因此不涉及任何悬停，只是一个无法正常工作的糟糕表单。
解决方案2
1 已采纳 2016-10-11 17:36:50
Now I am not sure how effective this technique would be at blocking bots.现在我不确定这种技术在阻止机器人方面的效果如何。 If you still want to give it a go, I'd do something like this:如果你仍然想试一试，我会做这样的事情：
HTML: HTML：
<form class="form" action="1.php" type="post">
<input type="text">
<input class="submitbutton" type="submit">
</form>
Javascript/jQuery: Javascript/jQuery：
var $form = $('.form'),
$btn = $('.submitbutton');
// Disable submit button on page load
$btn.prop('disabled',true);
// Reactivate submit button on form hover
$form.hover(
function(e){
e.stopPropagation();
$btn.prop('disabled',false);
}, function(e){
e.stopPropagation();
$btn.prop('disabled',true);
}
);
I put together an example at JSFiddle.我在 JSFiddle 上放了一个例子。
解决方案3
0 2016-10-11 16:52:03
In general, clicking the button should submit the form.通常，单击按钮应提交表单。 If you want to force the issue, I think you should try to disable the button first.如果你想强制这个问题，我认为你应该先尝试禁用按钮。
<span style="padding: 8px; background: red;" onmouseout="this.firstChild.disabled='';"><input type="button" name="test" id="test" value="roll over me" onmouseover="this.disabled=true;"></span>
as provided in the answer here:如此处的答案中所述：
Javascript: enable/disable button with mouseover/mouseout Javascript：启用/禁用鼠标悬停/鼠标移出按钮
解决方案4
-1 2016-10-11 17:10:53
it seems your question is navigating to another page without clicking a button.您的问题似乎是在不单击按钮的情况下导航到另一个页面。
<html>
<head>
</head>
<body>
<button onmouseover="go()" id="button">hii</button>
<script>
var anchor=document.createElement("a");
var button=document.getElementById("button");
anchor.href="alarm2.html";
function go()
{
button.onmouseover= anchor.click();
}
</script>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.