javascript - 触摸事件上的按钮背景颜色与单击事件上的按钮背景颜色不同

Question

我试图在每次点击(桌面设备)或触摸事件(智能手机)后将按钮颜色更改回红色。

Here working example from codepen

代码:

$(
  function(){    
    $("#btnAdd").mouseenter(function () {
          jQuery("#btnAdd").css("background-color", "black");
      }).mouseleave(function () {
          jQuery("#btnAdd").css("background-color", "#d80000");
      });    
  }  
);

它对于点击事件效果很好。但是，它不适用于触摸事件。颜色保持黑色。如何在手机上模拟“mouseleave”事件？似乎只触发了“mouseenter”事件，因为颜色更改为黑色并且保持黑色，直到单击其他元素。

我也尝试过 mousedown 和 mouseup 事件，但最终结果是相似的。在桌面上一切正常，在智能手机上颜色保持黑色。

Answer 1

您可以使用 on() 方法在代码中添加 mousedown 和 touchstart 事件。

$(function() {
  $("#btnAdd").on('mousedown touchstart', function () {
    jQuery("#btnAdd").css("background-color", "black");
  }).on('mouseup touchend', function() {
    jQuery("#btnAdd").css("background-color", "red");
  }); 
});

这是工作示例:http://codepen.io/anon/pen/JKxEBJ

<小时/>

另外，为什么不使用 CSS :active 来实现这个效果呢？