js的touch事件的实际引用

全栈程序员-站长 • 2021年12月27日下午2:00 • 未分类 • 阅读 58

大家好，又见面了，我是全栈君，今天给大家准备了Idea注册码。

一开始做前端页面的时候，接触的也是js，但是随后便被简单高效的jquery吸引过去，并一直使用至今。

而js，则被我主观的认为底层技术而抛弃。

直到这几天工作需要，研究移动端页面的触屏滑动事件，搜索jquery 的相应技术支持实在繁琐（当然也可能是我对jquery的理解不够），而js只需几步简单定义即可。

由于对js的了解比较少，最简单的应用我都试了很久……下面就分享下js的touch事件的实际应用：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>js的touch事件的实际应用_何问起</title>
    <base target="_blank" />
    <meta charset="utf-8" />
    <style>
        a{color:blue;}
    </style>
</head>
<body>
    <div>
        请在手机等触屏设备访问本页，然后拖动本页。拖动本页会弹出对话框。

        <br />
        <a href="http://hovertree.com">何问起</a>
        <a href="http://hovertree.com/menu/texiao/">网页特效</a>
        <a href="http://hovertree.com/h/bjaf/iw48pw0n.htm">代码说明</a>
       <br />
        <img src="http://hovertree.com/hvtimg/bjafjf/q4joew9u.png" alt="二维码" />
    </div>

    <script src="http://down.hovertree.com/jquery/jquery-1.12.4.min.js"></script>

    <script>
        $(function () {
            document.addEventListener("touchmove", _touch, false);
        })

        function _touch(event) {
            alert("何问起");
        }</script>
</body>
</html>

效果展示 http://hovertree.com/texiao/mobile/11/

手机扫描下面二维码体验效果：

js的touch事件的实际引用

以上代码不可避免的使用了jquery的某些东西，不使用jquery的可以忽略之。
相应的事件有：
touchstart:当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。
touchmove:当手指在屏幕上滑动时连续的触发。在这个事件发生期间，调用preventDefault()可阻止滚动。
touchend:当手指从屏幕上移开时触发。
touchcancel:当系统停止跟踪触摸时触发。关于此事件的确切触发事件，文档中没有明确说明。

以上事件的event对象上面都存在如下属性：
touches:表示当前跟踪的触摸操作的Touch对象的数组。
targetTouches:特定于事件目标的Touch对象的数组。
changedTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。

每个Touch对象包含下列属性：
clientX:触摸目标在视口中的X坐标。
clientY:触摸目标在视口中的Y坐标。
identifier：表示触摸的唯一ID。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触摸的DOM节点坐标

http://hovertree.com/h/bjaf/iw48pw0n.htm

网页特效：http://www.cnblogs.com/roucheng/p/texiao.html

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/120326.html原文链接：https://javaforall.net