jquery 禁用输入范围的移动滑动事件
jquery mobile swipe event disable for input range
我正在使用 jquery 移动设备在这样的应用中关闭和打开菜单:
$('body').on('swipeleft', function(event){
if(menuOpen == true){
home.showMenu();
}
});
$('body').on('swiperight', function(event){
if(menuOpen == false){
home.showMenu();
}
});
我的菜单中有一个输入范围(滑块),如下所示:
<input id="changeRadiusRange" type="range" min="5" max="100" step="5" oninput="handleInputVal(value)" onchange="handleChangeVal(this.value)">
现在,如果我使用我的滑块,它会在一段时间后停止(我认为 swipeleft/right 的 30 像素会被触发,如果它是滑动左键,菜单会关闭)
我已经尝试了一些关于 this 问题的方法,但没有改变行为:
$('#changeRadiusRange').on('swipeleft swiperight', function(e){
e.stopPropagation();
e.preventDefault();
});
如何强制正常输入行为不受滑动事件的影响?
目前是这样解决的:
$('body').on('swipeleft', function(event){
if(event.target.id != "changeRadiusRange"){
if(menuOpen == true){
home.showMenu();
}
}
});
但是在从 body 调用 swipeleft 事件后,滑块停止了。不会向左移动更多,所以我必须释放滑块并再次向左滑动,如果我需要直到调用 swipeleft 等。只是解决方法希望尽快修复它
我今天遇到了同样的问题,找到了一个不那么棘手的解决方案。
var handleSwipe = function (event) {
// my swipe stuff
}
// regular event listening
$(document).on("swipeleft swiperight", handleSwipe);
// additional workaround
$(".slider").on("mousedown touchstart", function (event) {
// when starting to interact with a .slider, stop listening the event
$(document).off("swipeleft swiperight");
}).on("mouseup touchend", function (event) {
// when interaction stops, re-listen to swipe events
$(document).on("swipeleft swiperight", handleSwipe);
});
只要在文档中的任何地方使用滑动事件,滑块似乎永远无法正常工作。即使在事件处理程序中没有执行任何操作时也是如此。 preventDefault()
and/or stopPropagation()
也没有任何改变。
使用此解决方案,我在用户与滑块交互时终止了之前启用的滑动事件。交互完成后,我重新启用滑动事件。非常适合我。
这对我适用于 jqm 1.4.5:
$(document).on('mousedown touchstart', 'input[type=range]',
function(e){
e.stopPropagation();
});
我正在使用 jquery 移动设备在这样的应用中关闭和打开菜单:
$('body').on('swipeleft', function(event){
if(menuOpen == true){
home.showMenu();
}
});
$('body').on('swiperight', function(event){
if(menuOpen == false){
home.showMenu();
}
});
我的菜单中有一个输入范围(滑块),如下所示:
<input id="changeRadiusRange" type="range" min="5" max="100" step="5" oninput="handleInputVal(value)" onchange="handleChangeVal(this.value)">
现在,如果我使用我的滑块,它会在一段时间后停止(我认为 swipeleft/right 的 30 像素会被触发,如果它是滑动左键,菜单会关闭)
我已经尝试了一些关于 this 问题的方法,但没有改变行为:
$('#changeRadiusRange').on('swipeleft swiperight', function(e){
e.stopPropagation();
e.preventDefault();
});
如何强制正常输入行为不受滑动事件的影响?
目前是这样解决的:
$('body').on('swipeleft', function(event){
if(event.target.id != "changeRadiusRange"){
if(menuOpen == true){
home.showMenu();
}
}
});
但是在从 body 调用 swipeleft 事件后,滑块停止了。不会向左移动更多,所以我必须释放滑块并再次向左滑动,如果我需要直到调用 swipeleft 等。只是解决方法希望尽快修复它
我今天遇到了同样的问题,找到了一个不那么棘手的解决方案。
var handleSwipe = function (event) {
// my swipe stuff
}
// regular event listening
$(document).on("swipeleft swiperight", handleSwipe);
// additional workaround
$(".slider").on("mousedown touchstart", function (event) {
// when starting to interact with a .slider, stop listening the event
$(document).off("swipeleft swiperight");
}).on("mouseup touchend", function (event) {
// when interaction stops, re-listen to swipe events
$(document).on("swipeleft swiperight", handleSwipe);
});
只要在文档中的任何地方使用滑动事件,滑块似乎永远无法正常工作。即使在事件处理程序中没有执行任何操作时也是如此。 preventDefault()
and/or stopPropagation()
也没有任何改变。
使用此解决方案,我在用户与滑块交互时终止了之前启用的滑动事件。交互完成后,我重新启用滑动事件。非常适合我。
这对我适用于 jqm 1.4.5:
$(document).on('mousedown touchstart', 'input[type=range]',
function(e){
e.stopPropagation();
});