使用jquery mobile和cordova时，在iOS上触摸开始和触摸结束不起作用

Question

使用jquery mobile和cordova时，在iOS上触摸开始和触摸结束不起作用

3

在之前的项目中，我使用以下代码来使用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">

我在这里漏掉了什么？

- OliverJ90

2

它运行良好。确保将事件绑定到pagecreate，就像在此演示中一样。另外，请使用jQM 1.4样式表而不是1.4RC1。 - Omar

这就是我缺少的，我没有意识到需要绑定到页面创建(pagecreate)才能使触摸事件(touchstart)起作用。谢谢。 - OliverJ90

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Joe Komputer · Answer 1

我不确定这是否能解决你的问题，但是.live()方法已经被弃用了。尝试使用.on()方法代替它。同时，尝试将touchstart和touchend替换为mousedown和mouseup，看看是否有效。这里有一个类似工作的plunker示例。