您好!欢迎进入紫石头原创模板堂!
网站首页 | 购买流程 | 关于我们 |  联系方式 |  客服热线:0371-56789-390
当前位置:首页 >> 建站知识 >> 详情
扫二维码关注紫石头原创模板堂 4大优势,全网首家
  • NO.1

    模板类网站比起独立设计的网站来讲价格低的多,因为很多东西是已经做成的,成本就低很多!

  • NO.2

    开源模板网站,任意修改使用!服务好到没话说!模板建站经常被贴上服务差的标签,而紫石头完全打破这样的格局!

  • NO.3

    模板网站还享受设计型网站同等级售后服务,这不是做梦!紫石头原创模板站,让这一切变为可能!

  • NO.4

    建站速度快,购买后简单修改即可投入使用。设计型网站正常需要10~20个工作日,而模板站只需要几个小时!

免费咨询热线
0371-56789-390

touch事件与click事件区别
发表:紫石头原创模板堂    发表时间:2019-09-16 11:57:21    阅读:66
    两个事件从名称上看差别有点大,touch事件用于移动端,click事件专注于电脑端。但是两者又有很大的相似之处,都是点击事件,一个是触屏点击,一个是通过鼠标点击。还有让人迷惑的一点,就是click事件用于移动端触屏点击同样有效。
    首先看一段代码实例:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=" utf-8">
    <meta name="author" content="" />
    <title>touch事件与click事件区别</title>
    <style type="text/css">
    div {
    width:150px;
    height:100px;
    background-color:blue;
    }
    </style>
    <script>
    window.onload = function () {
    let odiv = document.getElementsByTagName("div")[0];
    odiv.onclick = function () {
    odiv.style.backgroundColor = "red";
    }
    }
    </script>
    </head>
    <body>
    <div></div>
    </body>
    </html>
    上述代码为div元素注册click事件处理函数,点击之后将其背景颜色设置为红色。
    代码适用于电脑端,但是在移动端依然有效,触屏点击同样可以将div背景颜色设置为红色。
    虽然非常相似,两者的区别也是巨大的,下面分布进行一下介绍。
    一.为什么click事件可以用于移动端:
    最初移动端设备是无法访问网页的,电脑端一统天下,click自然顺风顺水。
    随着软硬件的进步,可以在移动端上浏览网页,自然要设计移动端想配套的事件。
    由此触屏相关的事件诞生,但是此时网页绝大多数都没有考虑移动端的。
    为了兼容电脑端的页面,采取了如下两个措施:
    (1).click事件在移动端依然有效,这也保全了已有的功能。
    (2).电脑端页面较大,将其置于屏幕较小的移动设备之中时,页面内容在视觉上非常小,必须具有放大镜一样的眼睛才能看清楚,为了解决此问题,对click事件进行了一些特殊处理,设备会检测两次连续的click事件之间的间隔,如果间隔小于300ms,那么就会触发页面的放大或者缩小功能,这样就差强人意的解决了用户浏览页面的问题;如果两次点击间隔大于300ms,那么触发普通的点击事件,这也就是大家常说的click事件300ms延迟现象。
    也可以看到,当前无需纠结于两者的区别,因为现在都有专门针对移动端设计页面,所以安心使用移动端配套的事件即可,当然多掌握一点知识没有任何问题,起码可以做到心中比较敞亮,对身体健康也是有好处的,^_^。
    三.touch事件的优先级高于click事件:
    touch事件的有限级高于click事件,下面通过一段代码实例进行一下简单演示。
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=" utf-8">
    <meta name="author" content="" />
    <title>touch事件与click事件区别</title>
    <style type="text/css">
    #ant {
    background: red;
    width: 500px;
    height: 500px;
    }
    </style>
    <script>
    window.onload = function () {
    let odiv = document.getElementById("ant");
    odiv.addEventListener("touchstart", function (e) {
    console.log("touchstart");
    });
    odiv.addEventListener("touchend", function (e) {
    console.log("touchend");
    });
    odiv.onclick = function () {
    console.log("divclick");
    }
    document.body.onclick = function () {
    console.log("bodyclick");
    }
    }
    </script>
    </head>
    <body>
    <div id="ant"></div>
    </body>
    </html>

    代码运行效果截图如下:

    使用preventDefault()可以屏蔽掉click事件,代码如下:
    odiv.addEventListener("touchstart", function (e) {
    console.log("touchstart");
    e.preventDefault();
    });
    将其放入touchend事件处理函数也可以产生同样的效果:
    odiv.addEventListener("touchend", function (e) {
    console.log("touchend");
    e.preventDefault();
    });
    非常简单,只要记住结论即可,就不再进行截图演示。
工作时间:周一至周五(08:30~18:00)
Copyright ©2003-2020 永易搜旗下紫石头原创模板堂 All Rights Reserved 豫ICP备14011598号-7 营业执照