Js_11_移动端事件

最新推荐文章于 2021-06-08 12:59:46 发布

小风儿

最新推荐文章于 2021-06-08 12:59:46 发布

阅读量1k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/littlewindy520/article/details/69220129

版权

JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

//移动端事件：为移动端量身定制

//PC端事件，在移动端上会有300毫秒的延迟

//也就是说，以后做移动端项目，涉及事件的时候，要使用移动端事件

//touchstart  touchmove  touchend touchcancel

//touchstart   onclick     
//touchmove    onmousemove
//touchend     onmouseup

//touchcancel(系统事件打断你的操作，比如突然来电，提示电量低)

1.强制解决PC端事件在移动端的300秒延迟

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
</head>
<body>
<script type="text/javascript">
    //使用viewport 可以强制解决PC端事件在移动设备上的300毫秒延迟
    document.addEventListener("click", function(ev){
        var n = new Date();
        console.log("PC" + n.getMilliseconds());
    })
    document.addEventListener("touchstart", function(){
        var n = new Date();
        console.log("mobile" + n.getMilliseconds());
    })

</script>
</body>

2.移动端事件练习

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
    #myDiv{
        width: 200px;
        height: 200px;
        background: green;
        position: absolute;
    }
</style>
</head>
<body>
<div id="myDiv"></div>
<script type="text/javascript">
    var myDiv = document.getElementById("myDiv");
    myDiv.addEventListener("touchstart", function(){
        document.addEventListener("touchmove", function(ev){
            //ev.touches获取的是个JSON对象[key]
            //JSON.key 其实还可以使用JSON[key]
            console.log(ev);
            console.log(ev.touches[0].clientX);
            //ev.touches[0] 获取的是个Touch对象
            //访问Touch里的对象的属性就可以拿到想要的值
            myDiv.style.left = ev.touches[0].clientX - myDiv.offsetWidth / 2 + "px";
            myDiv.style.top = ev.touches[0].clientY - myDiv.offsetHeight / 2 + "px";
        })
    })
    //移动端事件 不能用ontouchstart,应该用 addEventListener绑定  
</script>
</body>

3.touchJS讲解

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
    #myDiv{
        width: 200px;
        height: 200px;
        background: red;
    }
</style>
</head>
<body>
<script src="touch-0.2.14.min.js" type="text/javascript" charset="utf-8"></script>
<div id="myDiv">

</div>
<script type="text/javascript">
    //参数1：要绑定事件的标签（可以传CSS选择器）
    //参数2：要绑定的事件名
    //参数3：事件触发的方法
    touch.on("#myDiv", "swipe", function(){
        alert("敲我干啥");  
    })
    //常用事件：
    //tap:敲击事件
    //pinch:缩放事件
    //doubletap:双击事件
    //hold 长按
    //drag 拖拽
    //rotate 旋转
    //swipe 滑动

</script>

4.国际化

index.html
<style type="text/css">
    ul{
        list-style: none;
    }
    li{
        float: left;
        width: 150px;
        height: 30px;
        margin-right: 10px;
        border: 1px solid black;
        text-align: center;
        line-height: 30px;
    }
    #browsers{
        width: 100px;
        height: 50px;
    }
</style>
<script src="en.js" type="text/javascript" charset="utf-8"></script>
<script src="zh.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>

<select id="browsers" onchange="sel(this)" >
    <option id="selectLanguage"></option>
    <option id="zh" onclick="zh()"></option>
    <option id="en" onclick="en()"></option>

</select>


<ul>
    <li id="theIndex"></li>
    <li id="everyday"></li>
    <li id="shopping"></li>
    <li id="traval"></li>
    <li id="eating"></li>
</ul>


<script type="text/javascript">
    setThing(chinaObj); //默认调用中文显示

    function sel(ev){
        if (ev.value == "Chinese"){
            setThing(chinaObj);
        }
        if (ev.value == "英文"){
            setThing(enObj);
        }
    }
    function setThing(obj) {
        document.getElementById("theIndex").innerHTML = obj.theIndex;
        document.getElementById("everyday").innerHTML = obj.everyday;
        document.getElementById("shopping").innerHTML = obj.shopping;
        document.getElementById("traval").innerHTML = obj.traval;
        document.getElementById("eating").innerHTML = obj.eating;
        document.getElementById("selectLanguage").innerHTML = obj.selectLanguage;
        document.getElementById("zh").innerHTML = obj.zh;
        document.getElementById("en").innerHTML = obj.en;
    }

</script>

</body>

en.js
var enObj = {
    theIndex: "theIndex",
    everyday: "everyday",
    shopping: "shopping",
    traval: "traval",
    eating: "eating",
    selectLanguage: "selectLanguage",
    zh : "Chinese",
    en : "English"
}

zh.js
var zhObj = {
    theIndex: "旺达",
    everyday: "大连市沙河口区",
    shopping: "购物",
    traval: "旅行",
    eating: "学习",
    selectLanguage: "选择语言",
    zh : "中文",
    en : "英文"
}

另一种国际化简单

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="en.js"></script>
        <script src="zh.js"></script>
        <style>
            html,
            body {
                overflow: hidden;
            }

            #myUL {
                margin-top: 50px;
                width: 100%;
                list-style: none;
            }

            #myUL li {
                float: left;
                width: 19%;
                height: 30px;
                text-align: center;
                border: 1px solid red;
                font-size: 25px;
            }

            #mySel {
                float: right;
                margin-right: 50px;
            }
        </style>
    </head>

    <body>
        <select onchange="sel(this)" name="" id="mySel">
            <!--<option value=""></option>
            <option value=""></option>
            <option value=""></option>-->
            <option></option>
            <option></option>
            <option></option>
        </select>
        <ul id="myUL">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <script>
            var myULArr = document.querySelectorAll("#myUL>li");
            var mySelArr = document.querySelectorAll("#mySel>option");
            setThing(zhObj);

            function sel(ev) {
                if(ev.value == "Chinese") {
                    setThing(zhObj);
                }
                if(ev.value == "英文") {
                    setThing(enObj);
                }
            }

            function setThing(obj) {

                var navArr = obj.nav;
                for(var i = 0; i < myULArr.length; i++) {

                    myULArr[i].innerHTML = navArr[i];
                }
                var selArr = obj.selInfo;

                for(var i = 0; i < mySelArr.length; i++) {

                    mySelArr[i].innerHTML = selArr[i];
                }
            }
        </script>
    </body>

</html>
<!--//
<option> 与  <option/> 之间的值是浏览器显示在下拉列表中的内容， //而 value 属性中的值是表单被提交时被发送到服务器的值。 
    //注释：如果没有指定 value 属性，选项的值将设置为
<option> 标签中的内容。 //mySelArr[i].value = selArr[i];-->
//未选择，在页面加载的时候执行一遍sel 方法
//var self = document.getElementById("browsers");
//self.addEventListener("change", sel(self), false);

----------en.js
var enObj = {
    nav: ["HomePage",
        "EveryDay",
        "Shopping",
        "Travel",
        "Eat"
    ],
    selInfo: [
    "Select Language",
    "Chinese",
    "English"]
}

----------zh.js
var zhObj = {
    nav: [
        "首页",
        "每日",
        "购物",
        "旅游",
        "吃喝"
    ],
    selInfo: ["选择语言",
    "中文",
    "英文"]
}

有关swiper动态改变数据遇到的坑（不能自动滚动，自动跟新数据，切换不正常

小风儿

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Js_11_移动端事件

//移动端事件：为移动端量身定制//PC端事件，在移动端上会有300毫秒的延迟//也就是说，以后做移动端项目，涉及事件的时候，要使用移动端事件//touchstart touchmove touchend touchcancel//touchstart onclick //touchmove onmousemove//touchend onmouseup//touc
复制链接

扫一扫