如何停止 kendo 颜色选择器小部件中的事件冒泡?
How to stop event bubbling in kendo color picker widget?
我正在使用 kendo-colorpicker(kendoFlatColorPicker) 开发自定义地图视图组件以更改标记的颜色。
flatcolorpicker 的根元素是地图视图包装器元素的子元素。
<div id="map-view">
<!--some elements....-->
<div id="custom-flat-color-picker"></div>
</div>
在kendoFlatColorPicker中,用户可以通过拖动鼠标select在hsvRect面板中上色。
有一个关键问题...
当在 FlatColorPicker 面板上按下鼠标按钮并拖动鼠标时,地图视图中的地图图像也会被拖动。
我认为这个问题是由事件冒泡引起的。所以,我尝试在 'mousedown' 事件中使用 e.stopPropagation() 方法。
但是,它不起作用。
其他方式,我也尝试在kendo FlatColorPicker源代码中通过widget extends自定义_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);
当用户按下鼠标按钮拖动鼠标时,'press'事件发生在平面颜色选择器上,但是参数'e'没有方法stopPropagation()。
如何停止从颜色选择器冒泡到地图视图?
我解决了这个问题。
我在 chrome 开发工具中的事件侦听器堆栈中找到了事件 'pointerdown'。关于这个事件,我申请了e.stopPropagation().
我正在使用 kendo-colorpicker(kendoFlatColorPicker) 开发自定义地图视图组件以更改标记的颜色。 flatcolorpicker 的根元素是地图视图包装器元素的子元素。
<div id="map-view">
<!--some elements....-->
<div id="custom-flat-color-picker"></div>
</div>
在kendoFlatColorPicker中,用户可以通过拖动鼠标select在hsvRect面板中上色。 有一个关键问题... 当在 FlatColorPicker 面板上按下鼠标按钮并拖动鼠标时,地图视图中的地图图像也会被拖动。
我认为这个问题是由事件冒泡引起的。所以,我尝试在 'mousedown' 事件中使用 e.stopPropagation() 方法。 但是,它不起作用。
其他方式,我也尝试在kendo FlatColorPicker源代码中通过widget extends自定义_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);
当用户按下鼠标按钮拖动鼠标时,'press'事件发生在平面颜色选择器上,但是参数'e'没有方法stopPropagation()。
如何停止从颜色选择器冒泡到地图视图?
我解决了这个问题。 我在 chrome 开发工具中的事件侦听器堆栈中找到了事件 'pointerdown'。关于这个事件,我申请了e.stopPropagation().