admin管理员组文章数量:1323714
My scenario deals with Kendo UI, but I think it probably applies to JavaScript generally, hence the JavaScript tag.
I have a Kendo scheduler with the edit event option set to functionA.
In functionA, I create a Kendo window (basically a modal) that asks the user a question; in one case the edit event should continue and bubble up as if the modal had never been there, in the other, it should prevent default and return.
The problem is that the modal is non-blocking, so the confirm modal es up, but the event logic continues and bubbles to the editor's built-in edit event.
How can I capture and pause the current event and only continue it if the I get the desired result out of my Kendo window?
I know I can't and shouldn't make the Kendo window blocking due to JavaScript's single threaded nature, but is there a way to put this event on hold, and only resume it if I say so.
Basically, I want to do something like a event.Hold()
and if a condition is met, event.Resume()
, otherwise, do event.preventDefault()
.
My scenario deals with Kendo UI, but I think it probably applies to JavaScript generally, hence the JavaScript tag.
I have a Kendo scheduler with the edit event option set to functionA.
In functionA, I create a Kendo window (basically a modal) that asks the user a question; in one case the edit event should continue and bubble up as if the modal had never been there, in the other, it should prevent default and return.
The problem is that the modal is non-blocking, so the confirm modal es up, but the event logic continues and bubbles to the editor's built-in edit event.
How can I capture and pause the current event and only continue it if the I get the desired result out of my Kendo window?
I know I can't and shouldn't make the Kendo window blocking due to JavaScript's single threaded nature, but is there a way to put this event on hold, and only resume it if I say so.
Basically, I want to do something like a event.Hold()
and if a condition is met, event.Resume()
, otherwise, do event.preventDefault()
.
2 Answers
Reset to default 5Update
I tested the code I posted previously and I found that it doesn't work quite right. This is tested and works exactly as you wanted, plus its a drop in solution:
var event_store;
function handle_click(event) {
event.stopPropagation();
event_store = event;
//Open the modal here
//If it's possible, pass the event pointer to the modal's confirm callback
//instead of using event_store and pass that pointer to fire_event() when
//it's confirmed
}
function confirm_handle() {
resume_event("click");
}
function resume_event(type) {
if (event_store.target.parentNode) {
var event;
if (document.createEvent) {
event = document.createEvent("HTMLEvents");
event.initEvent(type, true, true);
} else {
event = document.createEventObject();
event.eventType = type;
}
event.eventName = type;
if (document.createEvent) { //Not IE
event_store.target.parentNode.dispatchEvent(event);
} else { //IE
event_store.target.parentNode.fireEvent("on" + event.eventType, event);
}
}
}
Previous
You could use something like this to "pause" the event bubbling. It cancels the event propagation and shows the modal when the click handler is called and sets the show_modal variable to false. Upon confirming fire_event() is called and it triggers the original event, this time not showing the modal, then resets show_modal back to true. You should also rest show_modal back to true in the event that the user does not confirm the modal.
var show_modal = true;
var event_store;
function handle_click(event) {
event.stopPropagation();
event_store = event;
show_modal = !show_modal;
if (show_modal) {
//Open the modal here
//If it's possible, pass the event pointer to the modal's confirm callback
//instead of using event_store and pass that pointer to fire_event() when
//it's confirmed
}
}
function fire_event() {
if (document.createEvent) { //Not IE
element.dispatchEvent(event_store);
} else { //IE
element.fireEvent("on" + event_store.eventType, event_store);
}
}
What you should actually be doing is
- call e.preventDefault() in the handler before showing your dialog
- when your dialog is confirmed (or rejected, I don't know the requirements), use the API method to start editing the scheduler event
This should get you started (will only work for the first edit; you'll want to reset the _confirmed
condition someplace):
edit: function (e) {
if (!this._confirmed) {
e.preventDefault();
// your dialog logic here..
if (window.confirm("Confirm edit?")) {
this._confirmed = true;
// in your code, you probably won't need the setTimeout wrapper
setTimeout(function () {
$("#scheduler").getKendoScheduler().editEvent(e.event);
}, 5);
// at some point, you'll probably want to reset this._confirmed
}
}
},
(see it work)
本文标签: Javascript cancel or let an event continueStack Overflow
版权声明:本文标题:Javascript: cancel or let an event continue? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742126426a2421963.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论