javascript - 按下/释放时更改按钮的状态

Question

我正在开发一个移动网站。我在 java 脚本中创建了动态按钮。现在我想为每个按钮绑定(bind)两个事件。

1) 按下时，将按钮的背景图像更改为 img-pressed.jpg。注意:每个按钮都有自己的正常和按下图像源。

2) 单击时，执行某些操作。

我对同时处理这两个事件感到非常困惑。

    ItemsToAdd += '" id="'+ appVal.id +'">\
               <a id="' + appVal.id + '" data-role="button" style="background-image:url('+ img_path + appVal.big_icon_normal_path +')" class="custom-button" href="#"></a>\
               <p><br><b>' + appVal.name + ' </b><br> ' + appVal.apptypename + '<br><i>' + appVal.price + '</i></p> </div>';


$("#appGrid" + catVal.id).append($(ItemsToAdd));
$("#appGrid" + catVal.id).trigger("create");    

$("#appGrid" + catVal.id + " > #" + appVal.id + " > #" + appVal.id ).bind('click', function ()
{
    updateAppInfo(appVal.id);
});

代码在点击事件上运行良好。实际上，我在单击按钮时更改了一些内容。现在我想在按下时更改图像源，并在松开时将源更改为正常。内容更改也应该适用。

我会感谢你的帮助。提前致谢。

Answer 1

尝试添加这个:

// preload the image
var preloader = new Image();
preloader.src = img_path + appVal.big_icon_mousedown_path;

// bind the events
$('.custom-button').bind({
    'mousedown' : function() {
            // you'll need to set appVal.big_icon_mousedown_path or similar 
            $(this).css('background-image', 'url('+ img_path + appVal.big_icon_mousedown_path +')');
    },
    'mouseup mouseleave' : function() {
            $(this).css('background-image', 'url('+ img_path + appVal.big_icon_normal_path +')');
    }
});