我正在使用 kendo-colorpicker(kendoFlatColorPicker) 开发自定义地图视图组件来更改标记的颜色。flatcolorpicker 的根元素是地图视图包装元素的子元素。
<div id="map-view">
<!--some elements....-->
<div id="custom-flat-color-picker"></div>
</div>
在 kendoFlatColorPicker 中,用户可以通过拖动鼠标在 hsvRect 面板中选择颜色。有一个关键问题... 在 FlatColorPicker 面板上按下鼠标按钮并拖动鼠标时,地图视图中的地图图像也会被拖动。
我认为这个问题来自事件冒泡。所以,我尝试在“mousedown”事件中使用 e.stopPropagation() 方法。但是,它不起作用。
其他方式,我也尝试通过小部件扩展自定义 kendo FlatColorPicker 源代码中的 _hsvEvets 方法,如下面的代码。
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);
当用户按下鼠标按钮拖动鼠标时,平面颜色选择器上会发生“按下”事件,但参数“e”没有方法 stopPropagation()。
如何停止从颜色选择器冒泡到地图视图?