javascript - 为什么这个输入总是保持可点击状态？

Question

基本上我希望外部 div 接受所有事件，因此 div 中的输入和其他任何内容都不可点击：

<div id="div1">
    <div id="div2">
        <label>Input 1</label>
        <input type="text" id="input1" />
    </div>
</div>

$(document).ready(function() {
    $(document).on('click', '#input1', function(e){
        e.preventDefault();
    };
});

这是非工作示例http://jsfiddle.net/KFWmk/3/

任何帮助表示赞赏:)

Answer 1

在较新的 jQuery (1.6+) 中：

$('div input').prop("readonly", true);

这会将 div 中的所有输入的 HTMLreadonly属性设置为 true。

请注意，.attr()在 jQuery 中已弃用用于设置属性（布尔值为 on 或 off 的属性）。

Answer 2

首先，因为您没有包含 jQuery 库。
第二，因为你有一个类型-o。
第三，因为焦点是在点击事件之前发出的。（证明）

如果要使输入字段不可编辑，可以使用：

$("input").prop("readonly", true);

或者只是当您在 html 中创建输入字段时：

<input readonly type="number">

如果您想防止专注于输入字段，您可以使用：

$("input").on("focus", function() {
    $(this).blur();
}); 

Answer 3

$('div input').attr("readonly", "readonly");

您可以将 div 中的所有输入字段设置为只读。

Answer 4

你可以这样尝试

$(document).ready(function() {
    $('div input').prop("readonly", true);
});