南平,福建省地级市,地处福建省北部,武夷山脉北段东南侧,位于闽、浙、赣三省交界处,俗称“闽北”,东北与浙江省江山、龙泉、庆元等县(市)相邻,西北与江西省的资溪、铅山、广丰等县接壤,东南与本省宁德市的古田、屏南县交界,西南与本省三明市的泰宁、将乐、沙县、尤溪等县毗邻 [1] ,介于北纬26°15’—28°19’,东经117°00’—119°17’之间,幅员面积2.63万平方千米,占福建省的五分之一; [2] 革命战争年代,福建省委曾经几度驻在闽北,被誉为“红旗不倒”的红土地。 [3-4]
南平辖2个市辖区、5个县、代管3个县级市;2019年末,全市户籍人口318.26万(常住人口269万),其中城镇常住人口154.68万人,城镇化率为为57.5% [5] 。第七次人口普查显示南平市2020年常住人口2680645人。 [41] 境内山峰耸峙,低山广布,河谷与山间小盆地错落其间,具有中国南方典型的“八山一水一分田”特征,形成以丘陵、山地为主的地貌。 [4]
南平是福建开发最早的地区之一;东汉时期,南平、建瓯、浦城等便建县;“福建”之名即来自福州、建州(今建瓯市)各取首字而来。 [4] 南平是闽越文化、朱子文化、武夷茶道文化、齐天大圣文化、太极文化的发源地,被誉为“闽邦邹鲁”和“道南理窟”;曾涌现出2000多位进士和17位宰相;拥有一级至三级旅游资源实体180多处,武夷山是全国仅有的4个“世界自然与文化遗产地”之一。 [2]
一说到移动端触摸事件,大家的反应不就是touchstart,touchmove,touchend吗,相当于pc段的mousedown,mousemove,mouseup,只要是写过pc端的js的话,若不慎,往往会坑在移动端。
比如说最近我就被touchmove坑了好久好久不能自拔。我的意图是在触摸的时候获取触控的位置坐标。当初我是这么写的:
复制代码var xy=document.getElementById("xy");var endxy=document.getElementById("end_xy");var content=document.getElementById("content");var x,y,end_x,end_y;document.addEventListener("touchstart",function(evt){x=parseInt(touch.pageX),y=parseInt(touch.pageY);end_x=x,end_y=y;xy.innerHTML=x+","+y;content.innerHTML=""; },false)document.addEventListener("touchmove",function(evt){end_x=parseInt(touch.pageX),end_y=parseInt(touch.pageY);xy.innerHTML=end_x+","+end_y;},false)document.addEventListener("touchend",function(evt){var x_x=end_x-x;var y_y=end_y-y;endxy.innerHTML=x_x+","+y_y;document.title="x轴移动了"+x_x+" ,y轴移动了"+y_y;if(y_y<-50){content.innerHTML="由于你向上滑动了一段距离,所以我要插入内容了";}else{content.innerHTML="";}},false)复制代码发现我的手指无论如何移动都不能获取到坐标,或者断断续续而不是连续地取值,造成很多怪异的现象。 通过仔细研究发现这里面有两个坑:
其一是要想获取触控的属性(坐标),首先要获取触控的对象,移动端不像PC端只有一个指针,所以要先取一个手指的情况下e.touches[0];
其二是触摸时浏览器有个默认的事件,这个事件会阻断你的所有操作。所以在操作之前要先把默认事件除掉evt.preventDefault();否则怪异现象层出不穷。
其三是一定要用addEventListener事件绑定,不可用ontouchmove,ontouchstart,ontouchend。
所以正确的触摸事件是这样子的:
复制代码var xy=document.getElementById("xy");var endxy=document.getElementById("end_xy");var content=document.getElementById("content");var x,y,end_x,end_y;document.addEventListener("touchstart",function(evt){var touch=evt.touches[0];x=parseInt(touch.pageX),y=parseInt(touch.pageY);end_x=x,end_y=y;xy.innerHTML=x+","+y;content.innerHTML=""; },false)document.addEventListener("touchmove",function(evt){evt.preventDefault();var touch=evt.touches[0];end_x=parseInt(touch.pageX),end_y=parseInt(touch.pageY);xy.innerHTML=end_x+","+end_y;},false)document.addEventListener("touchend",function(evt){var x_x=end_x-x;var y_y=end_y-y;endxy.innerHTML=x_x+","+y_y;document.title="x轴移动了"+x_x+" ,y轴移动了"+y_y;if(y_y<-50){content.innerHTML="由于你向上滑动了一段距离,所以我要插入内容了";}else{content.innerHTML="";}},false)复制代码如此便能很顺滑的持续获取手指的位置坐标。