Kendo ui 如何停止剑道颜色选择器小部件中的事件冒泡？

我正在使用kendo colorpicker（kendoFlatColorPicker）开发自定义地图视图组件，以更改标记的颜色。 flatcolorpicker的根元素是map view包装器元素的子元素

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

在kendoFlatColorPicker中，用户可以通过拖动鼠标在hsvRect面板中选择颜色。 有一个关键问题。。。 在FlatColorPicker面板上按下鼠标按钮并拖动鼠标时，地图视图中的地图图像也会被拖动

我认为这个问题来自于事件的冒泡。因此，我尝试在“mousedown”事件中使用e.stopPropagation（）方法。 然而，它不起作用

另外，我还尝试通过如下代码所示的小部件扩展来定制剑道FlatColorPicker源代码中的hsvets方法

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

var KEYDOWN\u NS='KEYDOWN.kendoEditor'；
var bind=kendo.bind；
var FlatColorPicker=kendo.ui.FlatColorPicker；
var extendFlatColorPicker=FlatColorPicker.extend({
选项：{
名称：“CustomFlatColorPicker”
},
init：函数（元素、选项）{
var self=这个；
FlatColorPicker.fn.init.call（self、element、options）；
},
_hsvArea：函数（）{
var=这个，
element=that.element，
hsvRect=element.find（'.k-hsv-rectangle'），
hsvHandle=hsvRect.find（'.k-draghandle'）.attr（'tabIndex'，0）；
函数更新（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；
（dx/rw，1-dy/rh）；
}
即.hsvEvents=new kendo.UserEvents（hsvRect{
全球：没错，
按：功能（e）{
//this.element.get（0）.dispatchEvent（新事件（'mousedown'））；
this.offset=kendo.getOffset（hsvRect）；
this.width=hsvRect.width（）；
this.height=hsvRect.height（）；
hsvHandle.focus（）；
更新呼叫（此，e.x.location，e.y.location）；
},
开始：函数（）{
hsvRect.addClass（'k-拖动'）；
hsvHandle.focus（）；
},
移动：功能（e）{
e、 预防默认值（）；
更新呼叫（此，e.x.location，e.y.location）；
},
结束：函数（）{
hsvRect.removeClass（'k-拖动'）；
}
});
那.hsvRect=hsvRect；
那.hsvHandle=hsvHandle；
//var cb=该值。hsvEvents.press；
//那.hsvEvents.press=函数（e）{
//e.停止传播（）；
//cb.呼叫（本）；
// };
}
});
插件（extendFlatColorPicker）；

当用户按下鼠标按钮拖动鼠标时，平面颜色选择器上会发生“按下”事件，但参数“e”没有stopPropagation（）方法

如何停止从colorpicker到map view的冒泡？

我解决了这个问题。

---

我在chrome开发工具中可以找到的事件侦听器堆栈中找到了事件“pointerdown”。关于此事件，我应用了e.stopPropagation（）。

Do

preventDefault

或

return false

取消地图拖动？实际上，您的方式是最终选择，因为我试图在颜色选择器中作为“组件”解决此问题。谢谢你解决了这个问题。我在事件侦听器堆栈中找到了事件“pointerdown”。关于此事件，我应用了e.stopPropagation（）。然后将解决方案作为答案发布并接受它，。