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

Question

我有一个包含使用jquery自动保存并使用ajax进行更新的表单的网站。这种形式包含不同的类型，如文本框和jQuery UI的日期选择器和timepicker输入元素...

<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> 

现在，我需要重新加载过滤的目的为体内的含量。 现在可能发生的情况是内容被重新加载，而表单仍然接受输入并尝试保存它，但重新加载后它会“消失”，因为它未被纳入新视图。 使用指针事件添加叠加层：没有停止鼠标事件，但仍然可以键入。

我已经试过是：

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

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

是Seam为火狐但不是Chrome或IE

工作是否有办法防止键盘事件捕捉到的形式为每个浏览器？

Answer 1

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

例如：

jQuery的1.6+

​​

的jQuery 1.5及以下

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

你可以得到一些想法如何引导标记输入禁用，如果你重新陌生... http://getbootstrap.com/css/。

Answer 2

如果您希望输入无法编辑，正确的方法是禁用它们。像这样的东西会做：

$(function() { 
 
    $(".datepicker").datepicker(); 
 
    
 
    $("#disable").click(function() { 
 
    $("#body input").prop("disabled", true); 
 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
<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> 
 

 
<input type="button" value="disable" id="disable"/>

很明显，你可以重新启用它们一旦你完成加载不管它是你正在加载。

试图阻止你怎么可能与控制，而不是你想要的状态的控制是在，交互的细节是做了错误的方式。你不在乎是否有人点击或键入，你关心的是该控件不能被编辑。例如，你已经停止了点击和按键，但触摸事件呢？或者任何其他类型的事件，某些浏览器可能实现与控件交互。如果您尝试通过拦截导致控件执行某些操作的事件来禁用某个控件，那么总会有您错过某些交互的风险。