Question

在之前的项目中，我对使用touchstart和touchend事件修改按钮的css的下面代码没有任何问题：

<script>

$('input[type="button"]').on('touchstart', function(e){
$(this).css('background-color','#49D623');
                                       });

$('input[type="button"]').on('touchend', function(e){
              $(this).css('background-color','');
              });

</script>

这是使用版本2.9.0的iOS cordova项目

由于我已经升级到cordova 3.2并使用jquery mobile 1.4.0和jquery 1.10.2并且相同的上述代码不再有效。

我尝试了.on(touchstart，.bind(touchstart和.live(touchstart使用了jquery 1.8，但在1.9中已弃用。我也尝试使用按钮的id，但这也不起作用。

我知道touchstart正在被识别，因为我已经测试了它以启动其他功能，它就像一个魅力，只是不是为了这个。

这就是按钮在我的html中的显示方式：

<input type="button" id="submit" data-role="none">

相关按钮的CSS：

input[type="button"] {

-webkit-appearance: none;
border-radius: 0px;
width: 92%;
margin-top: 3%;
margin-left: 5%;
background-color: rgba(23,24,54,1.00);
padding: 10px;
border-width: 1px;
border-color:rgba(88,88,88,1.00);
font-size: 1em;
color: #FFFFFF;
font-family: 'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
background-image: url(../img/padlock2.png);
background-size: 20px;
background-repeat:no-repeat;
background-position: 50% 50%;

    }

以下内容在我的html文件的头部引用：

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.mobile-1.4.0.min.js"></script>
<script src="cordova.js"></script>
<script src="cordova_plugins.js"></script>

<link rel="stylesheet" type="text/css" href="css/jquerymobile1.4rc1.css">
<link rel="stylesheet" type="text/css" href="css/login.css">
<link rel="stylesheet" type="text/css" href="css/globalstyles.css">

我在这里缺少什么？

Answer 1

我不确定它是否能解决您的问题，但不推荐使用.live（）方法。尝试使用.on（）方法代替它。也尝试用mousedown和mouseup替换touchstart和touchend，看看是否有诀窍。这是plunker where i got something similar to work

Touchstart和touchend不使用jquery mobile和cordova在iOS上工作

1 个答案: