一旦我触发了event . preventdefault(),我如何再次恢复默认操作?
当前回答
我认为“相反”应该是模拟一个事件。你可以使用.createEvent()
以下Mozilla的例子:
function simulateClick() {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window,
0, 0, 0, 0, 0, false, false, false, false, 0, null);
var cb = document.getElementById("checkbox");
var cancelled = !cb.dispatchEvent(evt);
if(cancelled) {
// A handler called preventDefault
alert("cancelled");
} else {
// None of the handlers called preventDefault
alert("not cancelled");
}
}
裁判:document.createEvent
jQuery有.trigger(),因此可以触发元素上的事件——有时很有用。
$('#foo').bind('click', function() {
alert($(this).text());
});
$('#foo').trigger('click');
其他回答
为了执行异步调用,我不得不在jQuery中延迟表单提交。下面是简化的代码…
$("$theform").submit(function(e) {
e.preventDefault();
var $this = $(this);
$.ajax('/path/to/script.php',
{
type: "POST",
data: { value: $("#input_control").val() }
}).done(function(response) {
$this.unbind('submit').submit();
});
});
没有与event.preventDefault()相反的方法来理解为什么在调用event.preventDefault()时首先要研究它做什么。
在底层,preventDefault的功能本质上是调用一个返回false,它会停止任何进一步的执行。如果你熟悉Javascript的老方法,就会发现使用return false来取消表单提交事件和使用return true来取消按钮(在jQuery出现之前)曾经很流行。
正如您可能已经根据上面的简单解释得出的那样:event.preventDefault()的反义词是什么都没有。如果您不阻止该事件,默认情况下浏览器将允许该事件发生。
请看下面的解释:
;(function($, window, document, undefined)) {
$(function() {
// By default deny the submit
var allowSubmit = false;
$("#someform").on("submit", function(event) {
if (!allowSubmit) {
event.preventDefault();
// Your code logic in here (maybe form validation or something)
// Then you set allowSubmit to true so this code is bypassed
allowSubmit = true;
}
});
});
})(jQuery, window, document);
在上面的代码中,你会注意到我们正在检查allowSubmit是否为false。这意味着我们将阻止表单使用事件提交。preventDefault,然后我们会做一些验证逻辑,如果我们满意,设置allowSubmit为true。
这实际上是唯一有效的与event.preventDefault()相反的方法——您也可以尝试删除事件,这基本上可以实现相同的效果。
我建议采用以下模式:
document.getElementById("foo").onsubmit = function(e) {
if (document.getElementById("test").value == "test") {
return true;
} else {
e.preventDefault();
}
}
<form id="foo">
<input id="test"/>
<input type="submit"/>
</form>
...除非我遗漏了什么。
http://jsfiddle.net/DdvcX/
Jquery on()可能是另一个解决方案。特别是涉及到名称空间的使用时。
Jquery on()只是当前绑定事件的方式(而不是bind())。Off()是解除这些绑定。使用名称空间时,可以添加和删除多个不同的事件。
$( selector ).on("submit.my-namespace", function( event ) {
//prevent the event
event.preventDefault();
//cache the selector
var $this = $(this);
if ( my_condition_is_true ) {
//when 'my_condition_is_true' is met, the binding is removed and the event is triggered again.
$this.off("submit.my-namespace").trigger("submit");
}
});
现在,通过使用命名空间,您可以添加多个这样的事件,并能够根据您的需要删除它们。虽然提交可能不是最好的例子,但这可能在点击或按键或其他方面派上用场。
好的!它适用于点击事件:
$("#submit").click(function(event){
event.preventDefault();
// -> block the click of the sumbit ... do what you want
// the html click submit work now !
$("#submit").unbind('click').click();
});
推荐文章
- 我如何检查如果一个变量是JavaScript字符串?
- 如何检测如果多个键被按下一次使用JavaScript?
- 如何通过history. pushstate获得历史变化的通知?
- 使用jQuery改变输入字段的类型
- 在JavaScript中,什么相当于Java的Thread.sleep() ?
- 使用jQuery以像素为整数填充或边距值
- 检查是否选择了jQuery选项,如果没有选择默认值
- Next.js React应用中没有定义Window
- 如何重置笑话模拟函数调用计数之前,每次测试
- 如何强制一个功能React组件渲染?
- 在javascript中从平面数组构建树数组
- 将Dropzone.js与其他字段集成到现有的HTML表单中
- 如何在AngularJS中观察路由变化?
- JavaScript DOM删除元素
- 将dd-mm-yyyy字符串转换为日期