Javascript:取消还是让事件继续? [英] Javascript: cancel or let an event continue?

问题描述

我的场景涉及 Kendo UI，但我认为它可能适用于一般的 JavaScript，因此是 JavaScript 标签.

My scenario deals with Kendo UI, but I think it probably applies to JavaScript generally, hence the JavaScript tag.

我有一个 Kendo 调度程序，其编辑事件选项设置为 functionA.

I have a Kendo scheduler with the edit event option set to functionA.

在functionA中，我创建了一个Kendo窗口(基本上是一个模态)来询问用户一个问题；在一种情况下，编辑事件应该继续并冒泡，就好像模态从未存在过一样，在另一种情况下，它应该防止默认和返回.

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 comes up, but the event logic continues and bubbles to the editor's built-in edit event.

如何捕获和暂停当前事件，并仅在我从 Kendo 窗口中获得所需结果时才继续它?

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?

我知道由于 JavaScript 的单线程性质，我不能也不应该让 Kendo 窗口阻塞，但是有没有办法让这个事件暂停，只有在我说的时候才恢复.

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.

基本上，我想做类似 event.Hold() 的事情，如果满足条件，event.Resume()，否则，做 event.preventDefault().

Basically, I want to do something like a event.Hold() and if a condition is met, event.Resume(), otherwise, do event.preventDefault().

推荐答案

更新

我测试了我之前发布的代码，发现它运行得不太正确.这已经过测试并且完全按照您的要求工作，另外还有一个解决方案:

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

上一个

您可以使用类似的方法来暂停"事件冒泡.它取消事件传播并在调用单击处理程序时显示模态，并将 show_modal 变量设置为 false.在确认调用 fire_event() 并触发原始事件后，这次不显示模态，然后将 show_modal 重置为 true.如果用户没有确认模态，您还应该将 show_modal 重新设置为 true.

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

这篇关于Javascript:取消还是让事件继续?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！