javascript preventDefault 不适用于焦点事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6740269/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
preventDefault does not work on focus event
提问by Elias Zamaria
I am trying to design a form such that if it has a certain class, the user should not be able to interact with any of the inputs. For various reasons, I would like to avoid using the "disabled" attribute. I am trying to prevent the default on the focus event and it is not working. I tested this in recent versions of Firefox, Chrome, and Android. I tried various combinations of events, such as "click change touchstart focus focusin". I tried puting "return false;" in the handler. Does anyone know why this is happening and how to make it work?
我正在尝试设计一个表单，如果它具有某个类，则用户应该无法与任何输入进行交互。由于各种原因，我想避免使用“禁用”属性。我试图阻止焦点事件的默认设置，但它不起作用。我在 Firefox、Chrome 和 Android 的最新版本中对此进行了测试。我尝试了各种事件组合，例如“单击更改 touchstart 焦点 focusin”。我试着把“返回假；” 在处理程序中。有谁知道为什么会发生这种情况以及如何使其发挥作用？
<!DOCTYPE html>
<html><head>
<title>input test</title>
</head>
<body>
<form class="disabled">
<input type="text">
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(".disabled :input").bind("focus", function(e) {
e.preventDefault();
});
</script>
</body></html>
You can see an example at http://jsfiddle.net/54Xka/
你可以在http://jsfiddle.net/54Xka/看到一个例子
EDIT:This will be on a site intended mostly for mobile browsers. I am planning to disable the inputs when a modal dialog is showing. The modal dialog is implemented using my own code. It is something very simple that shows and hides a div.
编辑：这将在一个主要用于移动浏览器的网站上。我打算在显示模式对话框时禁用输入。模态对话框是使用我自己的代码实现的。显示和隐藏 div 非常简单。
EDIT 2:This is what I have now:
编辑 2：这就是我现在所拥有的：
$(".disabled :input").live({
focus: function() {
$(this).blur();
},
change: function(e) {
e.preventDefault();
}
});
It has some minor aesthetic issues but it works. When I have more time, I may try jfriend00's idea with the transparent gif, or something similar to what the jQuery UI dialog widget does, or maybe actually using the jQuery UI dialog widget to implement the dialog.
它有一些小的美学问题，但它有效。当我有更多时间时，我可能会尝试使用 jfriend00 的想法与透明 gif，或者类似于 jQuery UI 对话框小部件所做的事情，或者可能实际上使用 jQuery UI 对话框小部件来实现对话框。
回答by Dr.Molle
you may use
你可以使用
this.blur();
...instead.
...反而。
回答by jfriend00
For text fields, the best thing to do is to set them to read only. This still allows tabbing and copying, but not modification.
对于文本字段，最好的做法是将它们设置为只读。这仍然允许制表符和复制，但不允许修改。
<input type="text" readonly="readonly" value="Can't change me">
If you also want to stop tabbing, then a proper functioning web page supports keyboard navigation among the objects on the page intended for keyboard access. That means that any option that just simply tries to block the focus will interrupt any attempt to navigate the web page via keyboard. As such, it's best to block tabbing between items by telling the browser that this object is not intended as a tab stop and it will happily just skip over it when the tab key is pressed. You can do so by settings tabIndex to -1 on the object. Keyboard navigation will never stop on it then, but will otherwise work as intended.
如果您还想停止 Tab 键，那么正常运行的网页支持在页面上用于键盘访问的对象之间的键盘导航。这意味着任何只是试图阻止焦点的选项都会中断任何通过键盘导航网页的尝试。因此，最好通过告诉浏览器该对象不打算用作制表位来阻止项目之间的 Tab 键切换，并且在按下 Tab 键时它会很高兴地跳过它。您可以通过将对象的 tabIndex 设置为 -1 来实现。键盘导航将永远不会停止，否则将按预期工作。
<input type="text" readonly="readonly" tabIndex="-1" value="Can't change me or tab to me">
If you're using different types of objects than text fields, then please be more specific about what types of objects. You should pursue the HTML attributes that support your intended behavior before resorting to scripts that mess with the expected functioning of the web page. It may also make sense to use something other than a usereditable tag to just display data (like a div) too if you don't intend for the user to be able to interact with it.
如果您使用的对象类型与文本字段不同，那么请更具体地说明对象的类型。在诉诸与网页预期功能混乱的脚本之前，您应该寻求支持您预期行为的 HTML 属性。如果您不打算让用户与其进行交互，那么使用 usereditable 标签以外的其他东西来仅显示数据（如 div）也可能是有意义的。
You can see examples of readonly and tabIndex fields here: http://jsfiddle.net/jfriend00/9wWkQ/
您可以在此处查看 readonly 和 tabIndex 字段的示例：http: //jsfiddle.net/jfriend00/9wWkQ/
Now, it sounds like we have moving specifications. Now you're saying you don't even want them to be able to select text. That can be done even in a plain div that isn't editable. If you want to block all user access including even selecting of the text of individual fields, then you will have to resort to something like putting a blank transparent gif image over the top of the area of your form. That will block all mouse interaction with the fields and combined with readonly and tabIndex should block all keyboard access too.
现在，听起来我们有移动的规格。现在您是说您甚至不希望他们能够选择文本。即使在不可编辑的普通 div 中也可以做到这一点。如果您想阻止所有用户访问，包括甚至选择单个字段的文本，那么您将不得不求助于诸如在表单区域顶部放置空白透明 gif 图像之类的方法。这将阻止所有鼠标与字段的交互，并结合 readonly 和 tabIndex 也应该阻止所有键盘访问。
