如何在dijit/formHorizontalSlider上检测onMoveStart和onMoveStop
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
- 如何在HorizontalSlider上收听
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>
只是为了参考,我在看了这个模块后才想出了这个解决方案。
相关文章:
- 如何检测是否有溢出
- 如何检测用于WebGL的专用或集成显卡
- 防止Alt+Shift默认操作或检测多种操作系统语言的Javascript
- 如何在使用selectBoxIt JQuery插件时检测选项更改
- 如何使用密码检测网络中的状态连接
- 使用JavaScript检测Flash
- 在不阻止默认行为的情况下检测IE10中的缩放
- 检测个位数整数时正在转换毫秒
- 检测电话窃听,即:<a href="电话:xxx">在UIWebview上
- 动态插入的表:JQuery未检测到最后一行
- 检测页面上某个元素中选择(突出显示)或单击的内容
- jQuery检测浏览器是否支持Zoom
- 检测iframe是否跨域的愚蠢方法
- 检测图像分辨率
- 如何检测第三方广告服务器请求
- 我是否可以检测到javascript正在被卸载(作为调试模式)
- 当没有文本输入聚焦时检测空格键按下
- 正在检测导航到<a name=“;最新主题”></a>
- 如何检测重叠元素下的单击
- 如何在dijit/formHorizontalSlider上检测onMoveStart和onMoveStop