events - data - knockoutjs: previene el burbujeo de eventos para elementos sin controlador

knockout data-bind class

Question

Parece que el <event>Bubble: false enlace <event>Bubble: false solo funciona cuando hay un controlador de eventos definido ( ver la Nota 4 ) para <event> .

Aquí hay un ejemplo de violín .

Para los elementos que tienen controladores nativos para ciertos eventos (por ejemplo, haga clic en: <textarea> , <a> , <select> , etc.), donde el controlador nativo es suficiente, esperaría establecer el enlace, por ejemplo, clickBubble: false en ellos, sin tener que unir un manejador "falso", para trabajar.

Supongo que mi pregunta es, ¿hay alguna otra forma de lograr esto sin enlaces adicionales?

Answer 1

Los manejadores de Bubble no son controladores de enlace reales y se utilizan como opciones en el enlace de event ( click vinculaciones de event llamadas vinculantes). Por lo tanto, no se ejecutan solos.

Por lo tanto, puede agregar un manejador no clickBubble "falso" y usar clickBubble o puede elegir crear un enlace personalizado para hacer esto por usted.

Tal vez algo así como:

ko.bindingHandlers.preventBubble = {
    init: function(element, valueAccessor) {
        var eventName = ko.utils.unwrapObservable(valueAccessor());
        ko.utils.registerEventHandler(element, eventName, function(event) {
           event.cancelBubble = true;
           if (event.stopPropagation) {
                event.stopPropagation();
           }                
        });
    }        
};

Y luego solo pon:

<input data-bind="preventBubble: ''click''" />

También puede mejorarlo para aceptar una serie de eventos, si es necesario.

Muestra: http://jsfiddle.net/rniemeyer/WcXwZ/