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

Question

我试图让按钮在每次点击（桌面设备）或触摸事件（智能 phones）后将颜色变回红色。

代码：

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

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

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

Answer 1

请改用onclick试试。

您可以尝试使用 $("button").click(function() {});

Answer 2

您可以使用智能手机的触摸事件。

$("#btnAdd").bind('touchstart ', function(){
      jQuery("#btnAdd").css("background-color", "black");
    });

这里是jsFiddlelink

仅供参考，有几个事件可以检测智能手机中的触摸，尤其是 IOS。

触摸启动
触摸移动
触摸结束
触摸取消

希望对你有帮助:)

Answer 3

您可以使用 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 来实现这种效果？

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

Button background color on touch event is not the same as on the click event

javascript

jquery

android

touch