定位触摸事件中的元素(mobile safari)

发布于 2024-10-14 15:25:14 字数 252 浏览 5 评论 0原文

我正在处理 Javascript 事件(一个对我来说完全陌生的主题),并且需要一些关于处理移动 Safari 中的触摸事件的指导。

我有一个看起来像这样的文档:

<div>
    <span>one</span><span>two</span>
</div>

我想突出显示用户当前正在触摸的任何范围。

我已经成功去了

I am working with Javascript events ( a subject completely foreign to me ) and am in need of some guidance on handling touch events in mobile safari.

I have a document that looks something like:

<div>
    <span>one</span><span>two</span>
</div>

I want to highlight whatever span the user is currently touching.

I have successfully go

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

扫码二维码加入Web技术交流群

发布评论

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

评论(2

梦年海沫深 2024-10-21 15:25:14

我找到的解决方案是将事件监听器添加到文档中:

    document.addEventListener("touchstart", touchStart, "true");
    document.addEventListener("touchmove", touchMove, "true");
    document.addEventListener("touchend", touchEnd, "true");

然后对每个触摸事件执行您需要的操作。我对此加注星号是因为它不是具有位置的事件本身(就像在正常事件处理中一样),而是具有位置的一组触摸。

    function touchMove(event)
{
    // // Prevent the webview itself from scrolling / bouncing around
     event.preventDefault();
    // Only track one finger
    if ( event.touches.length == 1)
    {
        var touch = event.touches[0];
        doStuffAtPosition(touch.pageX, touch.pageY);
    }
}

The solution I worked out is to add eventListeners to the document:

    document.addEventListener("touchstart", touchStart, "true");
    document.addEventListener("touchmove", touchMove, "true");
    document.addEventListener("touchend", touchEnd, "true");

Then do what you need to with each touch event. I star this because its not the event itself that has a location (like in normal event handling), it's the set of touches that have locations.

    function touchMove(event)
{
    // // Prevent the webview itself from scrolling / bouncing around
     event.preventDefault();
    // Only track one finger
    if ( event.touches.length == 1)
    {
        var touch = event.touches[0];
        doStuffAtPosition(touch.pageX, touch.pageY);
    }
}
‘画卷フ 2024-10-21 15:25:14

您可能想查看 http://www.jqtouch.com/

它创建了一个名为“tap”的事件 < a href="https://github.com/senchalabs/jQTouch/wiki/callbackevents" rel="nofollow">https://github.com/senchalabs/jQTouch/wiki/callbackevents

您可以使用jqtouch 的演示在这里 http://www.jqtouch.com/preview/demos/main/ #首页

You might want to checkout http://www.jqtouch.com/

It creates an event called "tap" https://github.com/senchalabs/jQTouch/wiki/callbackevents

You can play with a demo of jqtouch here http://www.jqtouch.com/preview/demos/main/#home

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文