jquery - 检测两个不同元素的触摸

标签 jquery dom cordova multi-touch

使用phonegap、jquery。 是否可以同时检测两个不同元素上的触摸?

我正在创建一些需要按下两个图像(左按钮和右按钮)的东西 在触发另一个事件之前的同一时间。

以下不是详尽的代码列表,但应该提供对我试图实现的目标的深入了解

<head>

<script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="jq.js"></script>
<script type="text/javascript" src="jquery.stopwatch.js"></script>

<script>
    var w = new Stopwatch(updatedisplay, 50);
    var onoff = false;

    $("#button-left, #button-right").unbind("touch",begin);

    function begin() {
        onoff = true;
        w.start();
    }

    function end() {
        w.stop();
        onoff = false;
    }       

    function updatedisplay(watch) {
        var mills = parseInt(watch.getElapsed().milliseconds/10);
        if(mills<10) {
            millis = '0'+mills;
        } else {
            millis = mills;
        }
        document.getElementById('counterValue').innerHTML = watch.toString() + "." + millis;
    }

    function reset() {
        w.stop();
        onoff = false;
        document.getElementById('counterValue').innerHTML = "00:00:00.00";
    }
</script>
</head>

<body onload="onBodyLoad()">
  <div id="counterValue">
    00:00:00.00
  </div>
  <div id="button-left"></div>
  <div id="button-right"></div> 
</body>

:::::创建了此修复程序:::::有点丑陋,但效果很好:::::

我找到了另一种方法,现在这可能有点难看..但效果很好......

    $(document).ready(function() {                          
       document.getElementById('button-left').addEventListener('touchstart', nofunc(e), false);
       document.getElementById('button-right').addEventListener('touchstart', nofunc(e), false);
    });

    function vala(val) {
        av = val;
        checkvals();
    }
    function valb(val) {
        bv = val;
        checkvals();
    }
    function checkvals() {
        if(av == 1 && bv == 1) {
            if(onoff == false) {
                begin();
            } else {
                end();
            }
        }
    }

   <div id="button-left" ontouchstart="vala(1)" ontouchend="vala(0)">&nbsp;</div>
   <div id="button-right" ontouchstart="valb(1)" ontouchend="valb(0)">&nbsp;</div> 

最佳答案

你的意思是unbind,因为detach是其他东西,它会从DOM中删除元素,要取消绑定(bind)事件,有unbind

$("#btn1, #btn2").unbind("touch");

更新

更改包含 js 文件的顺序,首先必须加载 jquery.js,然后加载使用它的其他库,其次我已从 中删除了 var wonoff 使它们成为全局范围,第三,我删除了 onbodyload 而是将触摸事件绑定(bind)在就绪处理程序中,如下所示,尝试

<head>

<script type="text/javascript" charset="utf-8" src="jq.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>
<script type="text/javascript" src="jquery.stopwatch.js"></script>

<script>
    w = new Stopwatch(updatedisplay, 50);
    onoff = false;

    function begin() {
        onoff = true;
        w.start();
    }

    function end() {
        w.stop();
        onoff = false;
    }       

    function updatedisplay(watch) {
        var mills = parseInt(watch.getElapsed().milliseconds/10);
        if(mills<10) {
            millis = '0'+mills;
        } else {
            millis = mills;
        }
        document.getElementById('counterValue').innerHTML = watch.toString() + "." + millis;
    }

    function reset() {
        w.stop();
        onoff = false;
        document.getElementById('counterValue').innerHTML = "00:00:00.00";
    }

$(document).ready(function(){
   $("#button-left, #button-right").bind("touch",begin);
});
</script>
</head>

<body>
  <div id="counterValue">
    00:00:00.00
  </div>
  <div id="button-left"></div>
  <div id="button-right"></div> 
</body>

关于jquery - 检测两个不同元素的触摸,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8960263/

相关文章:

android - 嵌套目录创建者 : Phonegap

jquery - 控制CSS的选项值

jquery - 使用 jQuery 更改添加到 DOM 中的元素的 CSS

javascript - 我想用取自同一页面的变量填充页面中的文本字段

java - 移动/复制捕获的图像phonegap android中的问题

android - 如何使用 Ionic 2 增加 Android 应用程序图标中的徽章计数通知?

jquery - 使用 jquery 自动播放和停止 html5 音频

javascript - 碰撞数组无法正常工作javascript

javascript - Bootstrap 下拉菜单在单击时隐藏 选择隐藏下拉菜单

javascript - jQuery 在特定 id 的元素中添加具有属性的新 DOM 元素