Esa*_*ian 26 javascript jquery mouseevent jquery-mobile
我已经构建了一个webapp,为了进行一些改进,我想添加mousedown和mouseup处理程序来交换图像(在这种情况下,使按钮看起来像是被按下了).
我的代码是这样的:
window.onload = function() {
//preload mouse down image here via Image()
$("#button_img").mousedown(function(){$("#button_img").attr("src","button_on.png");});
$("#button_img").mouseup(function(){$("#button_img").attr("src","button_off.png")});
}
这在桌面上游戏,但在移动设备上(在iOS Safari中测试),mousedown和mouseup事件同时发生,因此实际上没有任何反应.
我试图在jQueryMobile中使用vmousedown和vmouseup事件,但是这段代码:
//include jquerymobile.js and jquerymobile.css
window.onload = function() {
//preload mouse down image here via Image()
$("#button_img").vmousedown(function(){$("#button_img").attr("src","button_on.png");});
$("#button_img").vmouseup(function(){$("#button_img").attr("src","button_off.png")});
}
刚刚给了我vmousedown和vmouseup不存在的错误.此外,jQueryMobile会覆盖我已经为该页面编写的CSS.
那么有没有办法让vmousedown和vmouseup工作,并且没有jQuery Mobile的CSS这样做？
Jas*_*per 59
你正在寻找touchstart和touchend.它们是vmousedown并vmouseup试图模仿的事件.
这是一个例子:
window.onload = function() {
//preload mouse down image here via Image()
$("#button_img").bind('touchstart', function(){
$("#button_img").attr("src","button_on.png");
}).bind('touchend', function(){
$("#button_img").attr("src","button_off.png");
});
}
这将在任何支持触摸事件的设备上没有任何框架.您可以使用Modernizr之类的东西来执行此测试,如果设备不支持触摸事件,则绑定到常规桌面事件.
当您使用touchstart/ touchend/时,touchmove您会收到一些有趣的信息,例如一次发生多少次触摸,因此您可以检测用户是在滚动还是尝试缩放.
UPDATE
由于event事件处理程序中的对象因触摸事件和鼠标事件而异,如果您想以任何方式知道事件的坐标,您可以执行以下操作(以下示例假设已加载Modernizr):
//determine which events to use
var startEventType = 'mousedown',
endEventType = 'mouseup';
if (Modernizr.touch === true) {
startEventType = 'touchstart';
endEventType = 'touchend';
}
//bind to determined event(s)
$("#button_img").bind(startEventType, function(event) {
//determine where to look for pageX by the event type
var pageX = (startEventType === 'mousedown')
? event.pageX
: event.originalEvent.touches[0].pageX;
...
})...
UPDATE
我在看这个,看起来你不需要在绑定事件处理程序之前检测事件类型:
//bind to determined event(s)
$("#button_img").bind('mousedown touchstart', function(event) {
//determine where to look for pageX by the event type
var pageX = (event.type.toLowerCase() === 'mousedown')
? event.pageX
: event.originalEvent.touches[0].pageX;
...
})...
如果您担心快速连续接收这两个事件,可以使用超时来限制事件处理程序:
//create timer
var timer = null;
//bind to determined event(s)
$("#button_img").bind('mousedown touchstart', function(event) {
//clear timer
clearTimeout(timer);
//set timer
timer = setTimeout(function () {
//determine where to look for pageX by the event type
var pageX = (event.type.toLowerCase() === 'mousedown')
? event.pageX
: event.originalEvent.touches[0].pageX;
...
}, 50);
})...
注意:您可以使用开发人员工具快速连续强制mousedown和touchstart事件,但我不确定这里的实际用例.
你有没有考虑过使用 CSS 来设计你的按钮？:active当用户点击/触摸元素时，状态将被触发。下面是一个例子：
/* Default state */
#button_img {
background-image: url('button_off.png');
}
/* Clicked/touched state */
#button_img:active {
background-image: url('button_on.png');
}
CSS 的性能会更高，您还可以更好地分离关注点（显示与逻辑等）。
JSBin：http : //jsbin.com/beyin/1/
有一种方法可以获得jQueryMobile 的vmouseup、vmousedown、vmousemove、vclick等功能，而无需获得 jquerymobile 的所有其余部分（尤其是副作用）（即增强、额外的 css 等）
下载将仅包含一个 .js 文件（最小化版本和未压缩版本）。没有CSS。
将此脚本链接到普通 jquery 之后的 html 头部，并像这样使用它：
<head>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script src="whatever/path/jquery.mobile.custom.min.js"></script>
<script>
$(function(){ // or replace this with window.onload for that matter
// Your code here, e.g.
$("#button_img").on("vmousedown", function() {
/*whatever*/
});
// CAUTION: this won't work (see note below):
// $("#button_img").vmousedown(function(){/*whatever*/}); // WON'T WORK
});
</script>
</head>
注意：方法.vmousedown()、.vmouseup()等将不起作用。您必须将事件侦听器与 绑定.on("vmousedown", ...)。不知道为什么：我想这是因为 jquerymobile 创建与事件同名的快捷方法的部分位于其他模块中。也许可以找出它是哪个模块并将其包含在下载中，但我认为这会迫使您包含其他不需要的依赖项。