检测两个不同元素的触摸

发布于 2024-12-28 13:26:50 字数 2328 浏览 1 评论 0原文

使用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>

原文

Using phonegap, jquery.
Is it possible to detect touches on two different elements at the same time ?

I'm creating something that requires two images ( button-left and button-right ) to be pressed
at the same time before another event it triggered.

The following is not an exhaustive list of code, but should provide insight into what im trying to achieve

<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>

::::: CREATED THIS FIX ::::: A BIT UGLY BUT IT WORKS BRILLIANTLY :::::

I found another way around, now this might be a bit ugly.. but it works well ...

    $(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)"> </div>
   <div id="button-right" ontouchstart="valb(1)" ontouchend="valb(0)"> </div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

可可 2025-01-04 13:26:50

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

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

更新

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

<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>

you mean unbind because detach is something else it will remove the element from the DOM, to unbind the event there is unbind

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

Update

change the orrder in which you are including the js files the jquery.js has to be loaded first then the other liberaries that are using it, secondly i have removed the var from the w and onoff to make them global scope, thirdly i have removed the onbodyload instead bind the touch event in the ready handler as shown below, try

<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>

回复收藏 0 原文

淡莣 2025-01-04 13:26:50

如上所述，我找到了一种方法来做我需要的事情......一点“阅读手册”，我想出了这个

$(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();
        }
    }
}

as above, i found a way to do what i needed... a bit of "reading of manuals" and i came up with this

$(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();
        }
    }
}

回复收藏 0 原文

~没有更多了~