javascript - 防止所有浏览器在 div 内捕获鼠标和键盘事件

Question

我有一个包含表单的网站，该表单使用 jquery autosave 保存并使用 ajax 更新。该表单包含不同类型的输入元素，如文本框、jquery-ui 日期选择器和时间选择器...

<div id="body">
  <form id="line1">
    <input id="1" type="text"/>
    <input id="2" type="text" class="datepicker"/>
    <input id="3" type="text" class="timepicker"/>
    <select id="4" multiple="multiple>
       <option> 1 </option>
    </select>
  </form>
  <form id="line2">
    <input id="1" type="text"/>
    <input id="2" type="text" class="datepicker"/>
    <input id="3" type="text" class="timepicker"/>
    <select id="4" multiple="multiple">
       <option> 1 </option>
    </select>
  </form>
</div>

现在我需要重新加载正文内容以进行过滤。现在可能发生的情况是，内容被重新加载，虽然表单仍然接受输入并尝试保存它，但重新加载后它“消失”，因为它没有被带入新 View 。添加带有指针事件的覆盖:没有停止鼠标事件，但仍然可以打字。

我已经尝试过的是:

 function disableDiv(event)
 {
    event.stopimmediatepropagation()
 }

 ... 
 this.element.find('.body')[0].addEventListener("keydown", disableDiv, true); 

哪个接缝适用于 Firefox，但不适用于 Chrome 或 IE

有没有办法防止键盘事件捕获到每个浏览器的表单中？

Answer 1

我不确定我完全理解你的问题。但是您是否尝试过在提交表单时将 jQuery 将所有输入设置为“禁用”？这将实现在提交表单后不让您的输入被更改的目标。

例如:

jQuery 1.6+

$("input").prop('disabled', true);

jQuery 1.5 及更低版本

$("input").attr('disabled','disabled');

如果您不熟悉，您可以从 Bootstrap 如何将输入标记为禁用中获得一些想法... http://getbootstrap.com/css/ .