好的,这是我的问题。以下代码按预期工作,但我有一种唠叨的感觉,我应该能够更简洁地解决问题。我正在编写一个脚本,该脚本将允许人们使用 html 页面上的自定义控件平移/倾斜/缩放 IP 摄像机。我以数字键盘样式的排列方式布置了方向图标,代表向上、向下、向左等......这样:
1 2 3
4 _ 6
7 8 9
当用户将鼠标悬停在图标上时,img 将换成活动版本,并且开始操作的命令将发送到 php cURL 脚本以及相应的方向(图标 id)。释放鼠标后,图像将再次交换为非活动版本,并将命令发送到 cURL 脚本以停止向同一方向移动。
只要鼠标一直悬停在最初选择的同一图标上,这就可以工作。如果此人让鼠标离开图标,然后释放它,则第二个函数会检查当前是否激活了任何方向,将其停用并向 cURL 脚本发送相应的停止命令。
有没有办法使用一个函数实际完成此操作?
// PTZ MOVEMENT / IMAGE SWAP
$('.nav-control').on('mousedown mouseup', '.ptz-cmd', function(e){
var thisCmd = $(this).attr('id'); // 1 - 9, designating numberpad style of movement
var thisAction = $(this).attr('action') // pantilt or zoom
if (e.type == 'mousedown') {
$(this).attr('src','img/' + thisCmd + 'h.png'); // example: 1h.png = active icon, 1b.png = inactive icon
$('#ptz').load("ptz.php?action=" + thisAction + "&cmd=" + thisCmd); // movement is handled by php cURL script and 'loaded' into a hidden div
} else {
$(this).attr('src','img/' + thisCmd + 'b.png');
$('#ptz').load("ptz.php?action=" + thisAction + "&cmd=stop"); // stop the movement or zoom for this direction...
}
});
// CANCEL MOVEMENT AND REPLACE IMAGE IF MOUSE LEAVES ICON AND IS RELEASED
$('.nav-control').on('mouseleave', '.ptz-cmd', function(e){
$('#ptz').load("ptz.php?action=pantilt&cmd=stop");
$('.ptz-cmd:not([action=preset])').each(function(){
if($(this).attr('src').substring(5) == "h.png"){
var whichDirection = $(this).attr('src').substring(0,5);
$(this).attr('src',whichDirection + 'b.png')
}
});
});
绝对:
var $ptz = $('#ptz');
$('.nav-control').on({
mousedown:function(){
var self = this,
thisCmd = self.id,
thisAction = self.action;
self.src = 'img/' + thisCmd + 'h.png';
$ptz.load("ptz.php?action=" + thisAction + "&cmd=" + thisCmd);
},
mouseup:function(){
var self = this,
thisCmd = self.id,
thisAction = self.action;
self.src = 'img/' + thisCmd + 'b.png';
$ptz.load("ptz.php?action=" + thisAction + "&cmd=stop");
},
mouseleave:function(){
$ptz.load("ptz.php?action=pantilt&cmd=stop");
$('.ptz-cmd').filter(':not([action=preset])').each(function(){
var self = this,
src = self.src;
if(src.substring(5) === 'h.png'){
self.src = src.substring(0,5) + 'b.png';
}
});
}
},'.ptz-cmd');
变化:
- 通过使用
.on()
的对象形式,可以将这三个事件合并到单个绑定中 - 通过拆分
mousedown
和mouseup
,运行时解析更少(没有检查事件,每次运行的代码更少,等等) - 使用vanilla JS和jQuery更快,用于
src
,id
和action
等项目。 - 使用
===
而不是==
更严格,因此更符合标准 - 在顶部缓存
$('#ptz')
将节省额外的 DOM 抓取
这没有经过测试,但它背后的理论是合理的。即使只删除第一点,也会将所有事件绑定合并到单个调用中,并适当地委派。
另类:
var $ptz = $('#ptz');
$('.nav-control').on({
'mousedown mouseup':function(e){
var self = this,
cmdImg = self.id,
thisAction = self.action,
img = 'h',
thisCmd = cmdImg;
if(e.type === 'mouseup'){
img = 'b';
thisCmd = 'stop';
}
self.src = 'img/' + cmdImg + img + '.png';
$ptz.load("ptz.php?action=" + thisAction + "&cmd=" + thisCmd);
},
mouseleave:function(){
$ptz.load("ptz.php?action=pantilt&cmd=stop");
$('.ptz-cmd').filter(':not([action=preset])').each(function(){
var self = this,
src = self.src;
if(src.substring(5) === 'h.png'){
self.src = src.substring(0,5) + 'b.png';
}
});
}
},'.ptz-cmd');
这仅保持mouseup
和mousedown
组合,检查事件type
以查看它是哪个。它的速度稍慢,但将代码库整合到一个函数中,使维护更容易一些。请注意,在此选项中,当您有两个不同的事件时,您需要将其设置为字符串,例如 'mouseup mousedown'
与mouseup mousedown
...仅当存在单个对象时,才能使用对象名称。
这些选项中的任何一个都应该使您走上正确的轨道。