如何在使用 event.proventDefault ()之后触发事件

我想举办一个活动，直到我准备好开始为止

$('.button').live('click', function(e){


e.preventDefault();


// do lots of stuff


e.run() //this proceeds with the normal event


}

是否有与上面描述的 run()函数等效的函数？

235059 次浏览
小开
最佳答案

不行，一旦活动取消了，就取消了。

您可以稍后重新激活事件，使用一个标志来确定您的自定义代码是否已经运行-如下所示(请忽略明显的名称空间污染) :

var lots_of_stuff_already_done = false;


$('.button').on('click', function(e) {
if (lots_of_stuff_already_done) {
lots_of_stuff_already_done = false; // reset flag
return; // let the event bubble away
}


e.preventDefault();


// do lots of stuff


lots_of_stuff_already_done = true; // set flag
$(this).trigger('click');
});

一个更通用的变体(带有避免全局名称空间污染的额外好处)可以是:

function onWithPrecondition(callback) {
var isDone = false;


return function(e) {
if (isDone === true)
{
isDone = false;
return;
}


e.preventDefault();


callback.apply(this, arguments);


isDone = true;
$(this).trigger(e.type);
}
}

用法:

var someThingsThatNeedToBeDoneFirst = function() { /* ... */ } // do whatever you need
$('.button').on('click', onWithPrecondition(someThingsThatNeedToBeDoneFirst));

额外的超简约 jQuery 插件，支持 Promise:

(function( $ ) {
$.fn.onButFirst = function(eventName,         /* the name of the event to bind to, e.g. 'click' */
workToBeDoneFirst, /* callback that must complete before the event is re-fired */
workDoneCallback   /* optional callback to execute before the event is left to bubble away */) {
var isDone = false;


this.on(eventName, function(e) {
if (isDone === true) {
isDone = false;
workDoneCallback && workDoneCallback.apply(this, arguments);
return;
}


e.preventDefault();


// capture target to re-fire event at
var $target = $(this);


// set up callback for when workToBeDoneFirst has completed
var successfullyCompleted = function() {
isDone = true;
$target.trigger(e.type);
};


// execute workToBeDoneFirst callback
var workResult = workToBeDoneFirst.apply(this, arguments);


// check if workToBeDoneFirst returned a promise
if (workResult && $.isFunction(workResult.then))
{
workResult.then(successfullyCompleted);
}
else
{
successfullyCompleted();
}
});


return this;
};
}(jQuery));

用法:

$('.button').onButFirst('click',
function(){
console.log('doing lots of work!');
},
function(){
console.log('done lots of work!');
});
小开

只要“很多东西”不是异步的，这是绝对没有必要的-事件将调用每个处理程序在他的方式顺序，所以如果有一个 onclick 事件的父元素，这将触发后，onclik 事件的子完全处理。Javascript 在这里没有执行某种“多线程”操作，因此“停止”事件处理是必要的。结论: “暂停”一个事件只是为了在同一个处理程序中恢复它是没有任何意义的。

如果“很多东西”是的东西是异步的，这也没有意义，因为它阻止异步的东西做他们应该做的(异步的东西) ，使他们巴特就像一切都是有序的(我们回到我的第一段)

小开

只是不要执行 e.preventDefault();，或者有条件地执行它。

当然不能改变原始事件动作发生的 什么时候。

如果你想在一段时间后“重新创建”原始 UI 事件(比如，在 AJAX 请求的回调中) ，那么你只需要用其他方法来伪造它(比如 vzwick 的回答) ... ... 尽管我对这种方法的可用性表示怀疑。

小开

你可以这样做

$(this).unbind('click').click();
小开

一个更新的版本的公认答案。

简介:

$('#form').on('submit', function(e, options) {
options = options || {};


if ( !options.lots_of_stuff_done ) {
e.preventDefault();
$.ajax({
/* do lots of stuff */
}).then(function() {
// retrigger the submit event with lots_of_stuff_done set to true
$(e.currentTarget).trigger('submit', { 'lots_of_stuff_done': true });
});
} else {
/* allow default behavior to happen */
}


});


这种情况的一个很好的用例是，您可能有一些可用的遗留表单代码，但是您被要求在提交表单之前添加一些类似电子邮件地址验证的东西来增强表单。您可以编写一个 API，然后更新前端代码，以便在允许表单执行传统的 POST 之前首先访问该 API，而不是深入挖掘后端表单的邮件代码。

要做到这一点，您可以实现类似于我在这里所写的代码:

$('#signup_form').on('submit', function(e, options) {
options = options || {};


if ( !options.email_check_complete ) {


e.preventDefault(); // Prevent form from submitting.
$.ajax({
url: '/api/check_email'
type: 'get',
contentType: 'application/json',
data: {
'email_address': $('email').val()
}
})
.then(function() {
// e.type === 'submit', if you want this to be more dynamic
$(e.currentTarget).trigger(e.type, { 'email_check_complete': true });
})
.fail(function() {
alert('Email address is not valid. Please fix and try again.');
})


} else {


/**
Do traditional <form> post.
This code will be hit on the second pass through this handler because
the 'email_check_complete' option was passed in with the event.
*/


$('#notifications').html('Saving your personal settings...').fadeIn();


}


});
小开

像下面这样覆盖属性 isDefaultPrevented:

$('a').click(function(evt){
evt.preventDefault();


// in async handler (ajax/timer) do these actions:
setTimeout(function(){
// override prevented flag to prevent jquery from discarding event
evt.isDefaultPrevented = function(){ return false; }
// retrigger with the exactly same event data
$(this).trigger(evt);
}, 1000);
}

恕我直言，这是用完全相同的数据重新触发事件的最完整的方法。

小开

可以使用 event的 currentTarget。 例子展示了如何进行表单提交。同样，你也可以从 onclick属性等获得函数。

$('form').on('submit', function(event) {
event.preventDefault();


// code


event.currentTarget.submit();
});
小开

另一种解决方案是使用 window.setTimeout事件听众，并在事件流程完成后执行代码。

window.setTimeout(function() {
// do your thing
}, 0);

我使用 < em > 0 的时期，因为我不在乎等待。

小开

如果您使用的是锚标记，则接受的解决方案将无法工作。在这种情况下，您将无法在调用 e.preventDefault()之后再次单击该链接。这是因为 jQuery 生成的 click 事件只是本机浏览器事件的顶层。因此触发锚标签上的“点击”事件不会跟随链接。相反，您可以使用类似 Jquery 模拟的库来启动本机浏览器事件。

更多的细节可以在这个 链接中找到

小开

我使用的方法是这样的:

$('a').on('click', function(event){
if (yourCondition === true) { //Put here the condition you want
event.preventDefault(); // Here triggering stops
// Here you can put code relevant when event stops;
return;
}
// Here your event works as expected and continue triggering
// Here you can put code you want before triggering
});
小开

我知道这个话题很老了，但我认为我可以有所贡献。如果已经知道某个事件的默认行为，则可以在处理程序函数中随时触发该事件在特定元素上的默认行为。例如，当您在复位按钮上触发点击事件时，您实际上在最接近的表单上调用复位函数作为默认行为。在处理程序函数中，在使用 preventDefault 函数之后，可以通过在处理程序代码中的任何位置调用最接近的窗体上的复位函数来回忆默认行为。

小开

最近的一个答案巧妙地使用了 jQuery.one()

$('form').one('submit', function(e) {
e.preventDefault();
// do your things ...


// and when you done:
$(this).submit();
});

Https://stackoverflow.com/a/41440902/510905

小开

如果这个例子可以帮助，在一些链接上添加一个“自定义确认弹出”(我保留了“ $。是的。”，这只是执行原始操作的回调的一个示例) :

//Register "custom confirm popin" on click on specific links
$(document).on(
"click",
"A.confirm",
function(event){
//prevent default click action
event.preventDefault();
//show "custom confirm popin"
$.ui.Modal.confirm(
//popin text
"Do you confirm ?",
//action on click 'ok'
function() {
//Unregister handler (prevent loop)
$(document).off("click", "A.confirm");
//Do default click action
$(event.target)[0].click();
}
);
}
);
小开

如果将事件侦听器添加到表单并等待其提交，那么在检查需要检查的内容之后，可以使用。提交

const checkoutForm = document.getElementById('checkout-form');
const cart = {};
if (checkoutForm) {
checkoutForm.addEventListener('submit', e => {
e.preventDefault();
if(JSON.stringify(cart) === '{}'){
console.log('YOUR CART IS EMPTY')
alert('YOUR CART IS EMPTY');
return;
}
else{
checkoutForm.submit();
}
})
}
<form id="checkout-form" action="action-page" method="post">
<input type="text" name="name" />
<button>Submit</button>
</form>

通过这种方法，您可以解决表单提交问题，比如检查密码的强度，以及检查是否所有需要的字段都具有正确的数据

小开

下面是我的老方法，在函数内部使用 eventDefault 并触发“ click”，我只是将参数“ stop”传递给函数:

$(document).on('click', '.attachments_all', function(e, prevent = true){


if(prevent){


e.preventDefault();


var button = $(this);
var id = button.data('id');
    

$.ajax({
type: 'POST',
url: window.location.protocol + '//' + window.location.host + path + '/attachments/attachments-in-order/' + id,
dataType: 'json',
success: function(data){
if(data.success && data.attachments){
button.trigger('click', false);
} else {
swal({
title: "Brak załączników!",
text: "To zamówienie nie posiada żadnych załączników!",
type: "error"
});
return;
}
}
});
}


});

我希望有人会觉得它有用

小开

你可以使用它与定时器或没有定时器。

const form = document.querySelector('#form');


form.addEventListener('submit', (x) => {


x.preventDefault()


// Ajax or nay Code


setTimeout(() => {
x.target.submit();
}, 1000)


})

提交答案