Javascript: Cancel Or Let An Event Continue?

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 funct

Solution 1:

Update

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) {
        varevent;

        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);
    }
}

Solution 2:

What you should actually be doing is

1. call e.preventDefault() in the handler before showing your dialog
2. 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 wrappersetTimeout(function () { 
                $("#scheduler").getKendoScheduler().editEvent(e.event);
            }, 5);
            // at some point, you'll probably want to reset this._confirmed
        }
    }
},

(see it work)