[英]How to detect onMoveStart and onMoveStop on dijit/form/HorizontalSlider?
我正在使用dojo 1.10.4,我需要在dijit/form/HorizontalSlider
內的“內部滑塊元素”中檢測onMouseStart
和onMouseStop
事件。
目前,我試圖檢測的是對象_movable
(它是dojo/dnd/Moveable
),但是沒有成功,出現了錯誤:
Moveable.js:11 Uncaught TypeError: Cannot read property 'style' of undefined
onMouseStart
和onMouseStop
? 實時示例: https : //jsfiddle.net/9uo1doan/
require([
"dojo/dom",
"dijit/form/HorizontalSlider",
"dijit/form/TextBox",
"dojo/domReady!"
], function(dom, HorizontalSlider, TextBox) {
var slider = new HorizontalSlider({
name: "slider",
value: 5,
minimum: -10,
maximum: 10,
intermediateChanges: true,
style: "width:300px;",
onChange: function(value) {
dom.byId("sliderValue").value = value;
}
}, "slider");
slider._movable.onMoveStart(function(event) {
console.log('onMoveStart');
});
slider._movable.onMoveStop(function(event) {
console.log('onMoveStop');
});
slider._movable.onFirstMove(function(event) {
console.log('onFirstMove');
});
slider._movable.onMove(function(event) {
console.log('onMove');
});
slider._movable.onMoving(function(event) {
console.log('onMoving');
});
slider._movable.onMoved(function(event) {
console.log('onMoved');
});
});
<div id="slider"></div>
<p>
<input type="text" id="sliderValue" data-dojo-type="dijit/form/TextBox" />
參考: https : //dojotoolkit.org/reference-guide/1.10/dojo/dnd/Moveable.html
我也嘗試了沒有成功:
on(slider._movable, 'moveStart', function(e){});
我能夠使用dojo/aspect
解決此問題。
基本上,我發現的解決方案是在dojo/dnd/Moveable
上執行onMoveStart
方法之后運行我的函數。
我仍然對理解為什么使用事件偵聽器的更傳統方法無法奏效感興趣。
現場演示: https : //jsfiddle.net/8z6sm14j/
require([
"dojo/dom",
"dojo/on",
"dojo/aspect",
"dijit/form/HorizontalSlider",
"dijit/form/TextBox",
"dojo/domReady!"
], function(dom, on, aspect, HorizontalSlider, TextBox) {
debugger
var slider = new HorizontalSlider({
name: "slider",
value: 5,
minimum: -10,
maximum: 10,
intermediateChanges: true,
style: "width:300px;",
onChange: function(value) {
dom.byId("sliderValue").value = value;
}
}, "slider");
var result = document.getElementById('result');
aspect.after(slider._movable, 'onMoveStart', function(event) {
console.log('onMoveStart');
result.innerHTML = 'onMoveStart';
});
aspect.after(slider._movable, 'onMoveStop', function(event) {
console.log('onMoveStop');
result.innerHTML = 'onMoveStop';
});
});
<div id="slider"></div>
<input type="text" id="sliderValue" data-dojo-type="dijit/form/TextBox" />
<div id="result"></div>
僅供參考,在查看了此模塊后,我能夠提出該解決方案。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.