Как остановить всплывающее событие в виджете палитры цветов кендо?

Question

Я занимаюсь разработкой пользовательского компонента Map View с помощью kendo-colorpicker(kendoFlatColorPicker) для изменения цвета маркеров. корневым элементом flatcolorpicker является дочерний элемент элемента оболочки представления карты.

<div id="map-view">
    <!--some elements....-->
    <div id="custom-flat-color-picker"></div>
</div>

В kendoFlatColorPicker пользователь может выбирать цвет на панели hsvRect, перетаскивая мышь. Существует критическая проблема... При нажатии кнопки мыши и перетаскивании мыши на панели FlatColorPicker изображение карты в представлении карты также перетаскивается.

Я думаю, что эта проблема возникла из-за пузыря событий. Итак, я пытаюсь использовать метод e.stopPropagation() в событии 'mousedown'. Тем не менее, это не работает.

Другими способами я также пытаюсь настроить метод _hsvEvets в кендо. Исходный код FlatColorPicker через виджет расширяется, как показано ниже.

var KEYDOWN_NS = 'keydown.kendoEditor';
var bind = kendo.bind;
var FlatColorPicker = kendo.ui.FlatColorPicker;
var extendFlatColorPicker = FlatColorPicker.extend({
    options: {
        name: 'CustomFlatColorPicker'
    },
    init: function (element, options){
        var self = this;
        FlatColorPicker.fn.init.call(self, element, options);
    },
    _hsvArea: function () {
        var that = this,
            element = that.element,
            hsvRect = element.find('.k-hsv-rectangle'),
            hsvHandle = hsvRect.find('.k-draghandle').attr('tabIndex', 0);
        function update(x, y) {
            var offset = this.offset, dx = x - offset.left, dy = y - offset.top, rw = this.width, rh = this.height;
            dx = dx < 0 ? 0 : dx > rw ? rw : dx;
            dy = dy < 0 ? 0 : dy > rh ? rh : dy;
            that._svChange(dx / rw, 1 - dy / rh);
        }

        that._hsvEvents = new kendo.UserEvents(hsvRect, {
            global: true,
            press: function (e) {
                //this.element.get(0).dispatchEvent(new Event('mousedown'));
                this.offset = kendo.getOffset(hsvRect);
                this.width = hsvRect.width();
                this.height = hsvRect.height();
                hsvHandle.focus();
                update.call(this, e.x.location, e.y.location);
            },
            start: function () {
                hsvRect.addClass('k-dragging');
                hsvHandle.focus();
            },
            move: function (e) {
                e.preventDefault();
                update.call(this, e.x.location, e.y.location);
            },
            end: function () {
                hsvRect.removeClass('k-dragging');
            }
        });
        that._hsvRect = hsvRect;
        that._hsvHandle = hsvHandle;
        // var cb = that._hsvEvents.press;
        // that._hsvEvents.press = function(e){
        //  e.stopPropagation();
        //  cb.call(this);
        // };
    }
});
kendo.ui.plugin(extendFlatColorPicker);

Когда пользователь нажимает кнопку мыши для перетаскивания мыши, на плоском палитре цветов происходит событие "press", однако параметр "e" не имеет метода stopPropagation().

Как я могу прекратить пузыриться от палитры цветов до вида карты?

Answer 1

Я решил эту проблему. Я обнаружил событие 'pointerdown' в стеке прослушивателей событий, который можно найти в инструменте chrome dev. Об этом событии я применил e.stopPropagation().