0

好的，这是我的问题。下面的代码按预期工作，但我有一种唠叨的感觉，我应该能够更简洁地解决问题。我正在编写一个脚本，允许人们使用 html 页面上的自定义控件平移/倾斜/缩放 IP 摄像机。我已经以数字键盘风格的排列方式布置了方向图标，代表向上，向下，向左等......就像这样：

1 2 3

4 _ 6

7 8 9

当用户在图标上按住 mousedown 时，img 被换成活动版本，开始操作的命令连同相应的方向（图标 id）一起发送到 php cURL 脚本。当鼠标被释放时，图像再次被替换为非活动版本，并且命令被发送到 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')
        }
    });
});
4

1 回答 1

0

绝对地：

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');

变化：

  1. 通过使用 的对象形式.on()，您可以将这三个事件合并到一个绑定中
  2. 通过拆分mousedownand mouseup，运行时解析更少（没有检查事件，每次运行的代码更少，等等）
  3. src使用 vanilla JS 与 jQuery 相比更快，用于id、 和action.
  4. 使用 of===而不是==更严格，因此更符合标准
  5. $('#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'vs mouseup mousedown... 如果只有一个对象，您只能使用对象名称。

这些选项中的任何一个都应该使您走上正轨。

于 2013-09-09T16:56:14.667 回答