我写了一个页面上下滑动翻页,当我手指放到中间有内容的那个div范围内时,禁止了touchmove事件,用的是{
//阻止默认事件发生
e.preventDefault()
//阻止冒泡事件发生
e.stopPropagation()
e.nativeEvent.stopImmediatePropagation();}
但是中间那个div(有内容的那个)的滚动条就无法在手机上滚动了,在PC端电脑上可以滚动,请问大神,这个怎么解决?代码如下:
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script src="/include/zenkee.js"></script>
<script>
var PageSlide;
function Page_Load() {
Loadpage();
showdatail();
}
function changeMusic() {
if (document.getElementById('btnMusic').getAttribute("alt") == "停止音乐") {
document.getElementById('emb').pause();
document.getElementById('btnMusic').setAttribute("alt", "播放音乐");
} else {
document.getElementById('emb').play();
document.getElementById('btnMusic').setAttribute("alt", "停止音乐");
}
}
function showdatail() {
$.json('/user/jsonSchoolById.asp?s_id=' + <#QS:id> , function (o) {
for (var i = 0; i < o.length; i++) {
$('park').innerHTML = o[i].park;
$('about').innerHTML = o[i].about;
$('address').innerHTML = o[i].address;
$('purpose').innerHTML = o[i].purpose;
$('target').innerHTML = o[i].target;
$('object').innerHTML = o[i].object;
$('time').innerHTML = o[i].s_time + '-' + o[i].e_time;
$('slogan').innerHTML = o[i].slogan;
$('enrolment_class').innerHTML = o[i].enrolment_class;
$('promise').innerHTML = o[i].promise;
$('charges').innerHTML = o[i].charges;
document.getElementsByClassName('s_picture')[0].src = "http://8010.suyou188.com/p.asp?file=" + o[i].s_picture;
document.getElementsByClassName('s_picture')[1].src = "http://8010.suyou188.com/p.asp?file=" + o[i].s_picture;
document.getElementsByClassName('s_picture')[2].src = "http://8010.suyou188.com/p.asp?file=" + o[i].s_picture;
document.getElementById('pictures').src = "http://8010.suyou188.com/p.asp?file=" + o[i].pictures;
document.getElementsByClassName('contacts')[0].innerHTML = o[i].contacts;
document.getElementsByClassName('contacts')[1].innerHTML = o[i].contacts;
document.getElementsByClassName('phone')[0].innerHTML = o[i].phone;
document.getElementsByClassName('phone')[1].innerHTML = o[i].phone;
}
});
}
/* 当触点坐标在div范围之类执行这个方法*/
function addBan() {
var odiv = document.querySelector('.center');
var widthpoor = odiv.getBoundingClientRect().right - odiv.getBoundingClientRect().left;
var heightpoor = odiv.getBoundingClientRect().bottom - odiv.getBoundingClientRect().top;
var page = new PageSlide(document.querySelector('.pages'), 'Y', '');
//var pageTart=new page.touchstart(page);
alert(page.current);
}
function sbmChk() {
if ((_fm.name.value = _fm.name.value.trim()).length == 0) {
alert("请输入姓名");
_fm.name.focus();
return false;
}
if ((_fm.name.value = _fm.name.value.trim()).length == 0) {
alert("请输入年龄");
_fm.name.focus();
return false;
}
if ((_fm.name.value = _fm.name.value.trim()).length == 0) {
alert("请输入监护人");
_fm.name.focus();
return false;
}
if ((_fm.name.value = _fm.name.value.trim()).length == 0) {
alert("请输入地址");
_fm.name.focus();
return false;
}
if ((_fm.name.value = _fm.name.value.trim()).length == 0) {
alert("请输入联系电话");
_fm.name.focus();
return false;
}
document.form.action = "/user/getAddApply.asp?s_id=" + <#QS:id> ;
return true;
}
function excessive() {
}
/* 加载页面*/
function Loadpage() {
/* PageSlide接收三个参数:页面元素,要设定的滑动方向,可选的扩展函数*/
PageSlide = function (el, swipe, options) {
this.options = options || {} //可选函数
this.current = 0 //当前页面索引
this.pageX //横向的手指落点
this.pageY //纵向的手指落点
this.height //设备高度
this.width //设备宽度
this.flag //判断滑动方向的变量
this.move //滑动的距离
this.$el = el //当前页面的对象
this.swipe = swipe || 'X' //滑动方向参数
this.resize().init().bindEvents() //初始化
}
/*动态设定translate3d参数方法*/
PageSlide.prototype.setX = function (el, x, unit) {
el && (el.style.webkitTransform = 'translate3d(' + x + (unit || 'px') + ',0,0)')
}
PageSlide.prototype.setY = function (el, y, unit) {
el && (el.style.webkitTransform = 'translate3d(0,' + y + (unit || 'px') + ',0)')
}
/*页面初始化时获得当前页面的索引,并判断当前页面是否存在*/
PageSlide.prototype.init = function (i) {
var current = i ? this.$el.children[i] : this.$el.firstElementChild
//如果不存在该页面,那么结束运行
if (!current) throw 'ERROR';
//moving类名作为当前滑动页面的标记,也在样式中作滑动的扩展效果
current.classList.add('moving')
//设置页面的动画
current.style.webkitTransform = 'translate3d(0,0,0)'
//以swipe的值预设置其他页面的宽高,获得流畅的交互效果
for (var i = 1; i < this.$el.children.length; i++) {
this['set' + this.swipe](this.$el.children[i], (this.swipe === 'X' ? this.width : this.height))
}
setTimeout(function () {
current.classList.remove('moving')
current.classList.add('play')
}, 3e2)
return this
}
/*为页面绑定各种事件的绑定函数*/
PageSlide.prototype.bindEvents = function () {
var self = this
window.addEventListener('resize orientationchange', this.resize.bind(this), false)
'touchstart touchmove touchend touchcancel'.split(' ').forEach(function (evn) {
//将四个触控函数(申明在后面)绑定到每个页面,并且传递该页面对象
self.$el.addEventListener(evn, self[evn].bind(self), false)
})
}
/* 设置当前触控页面translate3d参数为0的方法*/
PageSlide.prototype.setCurrent = function (el, i) {
//设置位移属性
el && (el.style.webkitTransform = 'translate3d(0,0,0)')
if (i) {
//得到页面下标
this.current = i
//得到页面对象
this.$current = this.$el.children[i]
}
}
/*获得当前触控的页面对象*/
PageSlide.prototype.getCurrent = function () {
return this.$el.children[this.current]
}
/*初始化时获得设备的宽高*/
PageSlide.prototype.resize = function () {
this.width = this.$el.parentNode.clientWidth
this.height = this.$el.parentNode.clientHeight
return this
}
/*到达任意页面的random()方法*/
PageSlide.prototype.random = function () {
//获取所有页面
var count = this.$el.children.length
var current = this.current
var arr = []
var num
for (var i = 0; i < count; i++) {
//将其他页面的下标存放在数组
if (i !== current) arr.push(i.toString())
}
//随机获取页面的下标
num = Math.floor(Math.random() * arr.length)
//调用方法
this.direct(+arr[num])
}
/* 四个内建的滑动事件函数,与前面绑定函数相呼应*/
PageSlide.prototype.touchstart = function (e) {
//获取pages对象的touchers集合中的首个toucher对象,toucher触摸对象
var touches = e.touches[0]
//触控开始
this.flag = null
this.move = 0
//记录落点,获取页面的X和Y坐标
if (this.current !== 0) {
//获取中间有内容的div的坐标范围
var odiv = document.getElementsByClassName('center')[this.current - 1];
//判断触点的坐标是否在内容div之内,如果在,则禁用touch事件
if (touches.pageX>=odiv.getBoundingClientRect().left && touches.pageX<=odiv.getBoundingClientRect().right && touches.pageY>=odiv.getBoundingClientRect().top && touches.pageY<=odiv.getBoundingClientRect().bottom){
this.pageX=0;
this.pageY=0;
}else{
this.pageX = touches.pageX
this.pageY = touches.pageY
}
}else{
this.pageX = touches.pageX
this.pageY = touches.pageY
}
}
/* 滑动触发事件*/
PageSlide.prototype.touchmove = function (e) {
var touches = e.touches[0]
if (this.current !== 0) {
//获取中间有内容的div的坐标范围
var odiv = document.getElementsByClassName('center')[this.current - 1];
//判断触点的坐标是否在内容div之内,如果在,则禁用touch事件
if (touches.pageX>=odiv.getBoundingClientRect().left && touches.pageX<=odiv.getBoundingClientRect().right && touches.pageY>=odiv.getBoundingClientRect().top && touches.pageY<=odiv.getBoundingClientRect().bottom){
//阻止默认事件发生
e.preventDefault()
//阻止冒泡事件发生
e.stopPropagation()
e.nativeEvent.stopImmediatePropagation();
odiv.addEventListener('touchmove',function(e){e.returnValue = true;}, false);
}else if(this.pageX===0&&this.pageY===0){
//阻止默认事件发生
e.preventDefault()
//阻止冒泡事件发生
e.stopPropagation()
e.nativeEvent.stopImmediatePropagation();
odiv.addEventListener('touchmove',function(e){e.returnValue = true;}, false);
} else {
//得到X和Y方向上的滑动距离
var X = touches.pageX - this.pageX
var Y = touches.pageY - this.pageY
//得到当前页面对象
var current = this.getCurrent()
//获取他的上一级和下一级页面
var next = current.nextElementSibling
var prev = current.previousElementSibling
//添加移动样式
if (!this.flag) {
//判断是横向滑动还是纵向滑动
this.flag = Math.abs(X) > Math.abs(Y) ? 'X' : 'Y'
if (this.flag === this.swipe) {
//添加标记
current.classList.add('moving')
next && next.classList.add('moving')
prev && prev.classList.add('moving')
}
}
//判断滑动变量和滑动方向是否相等
if (this.flag === this.swipe) {
//阻止默认事件发生
e.preventDefault()
//阻止冒泡事件发生
e.stopPropagation()
switch (this.swipe) {
case 'X':
//swipe horizontal
this.move = X
this.setX(current, X)
//调用set属性
next && (this.setX(next, X + this.width))
prev && (this.setX(prev, X - this.width))
break;
case 'Y':
//swipe vertical
this.move = Y
this.setY(current, Y)
//调用set属性
next && (this.setY(next, Y + this.height))
prev && (this.setY(prev, Y - this.height))
break;
}
}
}
} else {
var touches = e.touches[0]
//得到X和Y方向上的滑动距离
var X = touches.pageX - this.pageX
var Y = touches.pageY - this.pageY
//得到当前页面对象
var current = this.getCurrent()
//获取他的上一级和下一级页面
var next = current.nextElementSibling
var prev = current.previousElementSibling
//添加移动样式
if (!this.flag) {
//判断是横向滑动还是纵向滑动
this.flag = Math.abs(X) > Math.abs(Y) ? 'X' : 'Y'
if (this.flag === this.swipe) {
//添加标记
current.classList.add('moving')
next && next.classList.add('moving')
prev && prev.classList.add('moving')
}
}
//判断滑动变量和滑动方向是否相等
if (this.flag === this.swipe) {
//阻止默认事件发生
e.preventDefault()
//阻止冒泡事件发生
e.stopPropagation()
switch (this.swipe) {
case 'X':
//swipe horizontal
this.move = X
this.setX(current, X)
//调用set属性
next && (this.setX(next, X + this.width))
prev && (this.setX(prev, X - this.width))
break;
case 'Y':
//swipe vertical
this.move = Y
this.setY(current, Y)
//调用set属性
next && (this.setY(next, Y + this.height))
prev && (this.setY(prev, Y - this.height))
break;
}
}
}
}
/* 滑动结束触发事件*/
PageSlide.prototype.touchend = function (e) {
//设置最小滑动距离
var minRange = 50
var move = this.move
//获取当前页面对象
var current = this.getCurrent()
//获取上下页面对象
var next = current.nextElementSibling
var prev = current.previousElementSibling
//给他们移除标记
current.classList.remove('moving')
next && next.classList.remove('moving')
prev && prev.classList.remove('moving')
if (!this.flag) return
//调用默认方法
e.preventDefault()
//滑动结束前往下一页面,next()方法调用了go()方法,判断是去上一页还是去下一页
if (move < -minRange && next) return this.next()
if (move > minRange && prev) return this.prev()
//调用重置方法
this.reset()
}
/* 滑动之后跟踪事件*/
PageSlide.prototype.touchcancel = function (e) {
//获取当前页面和上下级页面对象
var current = this.getCurrent()
var next = current.nextElementSibling
var prev = current.previousElementSibling
//移除标记
current.classList.remove('moving')
next && next.classList.remove('moving')
prev && prev.classList.remove('moving')
//调用重置方法
this.reset()
}
/* 调用go()方法前往下一页或上一页面*/
PageSlide.prototype.next = function () {
this.go(this.current + 1)
}
PageSlide.prototype.prev = function () {
this.go(this.current - 1)
}
/* 重置方法,用于初始化以及当前页面的重置*/
PageSlide.prototype.reset = function () {
var width = this.width
var height = this.height
var swipe = this.swipe
var current = this.getCurrent()
var prev = current.previousElementSibling
var next = current.nextElementSibling
this.setCurrent(current)
prev && (this['set' + swipe](prev, -(swipe === 'X' ? width : height)))
next && (this['set' + swipe](next, swipe === 'X' ? width : height))
}
/* 去往下一或上一页面的go方法*/
PageSlide.prototype.go = function (i) {
var onFinish = this.options.onFinish
var current = this.getCurrent()
//获取最后一页
var total = this.$el.childElementCount
var target = this.$el.children[i]
var d = i < this.current ? -1 : 1
if (i === this.current || i < 0 || i >= total) return
if (onFinish && (typeof onFinish === 'function')) onFinish.call(this, i)
// 滑动完成调用方法
typeof this.options.tranSetionEnd === 'function' && this.options.tranSetionEnd.call(this)
this.current = i
this['set' + this.swipe](current, -d * (this.swipe === 'X' ? this.width : this.height))
this.setCurrent(target, i)
this.finish(current, target)
}
/* 滑动完成后删除当前页面.play标记以及为下一页面添加.play标记*/
PageSlide.prototype.finish = function (curr, target) {
this.flag = null
setTimeout(function () {
curr && curr.classList.remove('play')
target && target.classList.add('play')
}, 3e2)
}
PageSlide.prototype.direct = function (i) {
if (i && typeof (i) === 'number') {
this.go(i)
for (var j = 0; j < i; j++) {
this['set' + this.swipe](this.$el.children[j], -1 * (this.swipe === 'X' ? this.width : this.height))
}
} else return
}
// 传参
document.addEventListener('touchmove', function (e) {
e.preventDefault()
})
/* 实例化显现页面*/
var pages = new PageSlide(document.querySelector('.pages'), 'Y', {
tranSetionEnd: function () {
console.log(this.current);
}
})
}
</script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
}
.pages {
width: 100%;
height: 100%;
position: relative;
background: #FFF;
}
.page {
font-size: 22px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
transform: translate3d(0px, 100%, 0px);
-webkit-transform: translate3d(0px, 100%, 0px);
-moz-transform: translate3d(0px, 100%, 0px);
transition: transform .5s ease-out;
-webkit-transition: -webkit-transform .5s ease-out;
-moz-transition: -moz-transform .5s ease-out;
background-image: url(<#PATH>招生.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
@-webkit-keyframes move {
100% {
-webkit-transform: translate3d(150px, 0, 0);
transform: translate3d(150px, 0, 0);
-ms-transform: translate3d(150px, 0, 0);
}
}
/*旋转*/
.rotate {
width: 50px;
height: 50px;
border-radius: 25px;
position: fixed;
background-image: url(<#PATH>音乐.png);
background-repeat: no-repeat;
background-size: 100% 100%;
top: 15;
left: 8;
display: inline-block;
-webkit-animation: rotate 5s linear;
animation: rotate 5s linear;
animation-iteration-count: 999999;//定义动画播放的次数
-webkit-animation-iteration-count: 999999;
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg)
}
}
.xiangxiatishi {
position: fixed;
bottom: 20px;
left: 50%;
-webkit-transform: translateX(-50%);
-webkit-animation: dong 1s linear 0s infinite alternate;
}
.top {
width: 70%;
height: 25%;
margin: 0 auto;
background-color: rgba(0, 0, 0, 0);
text-align: center;
}
.center {
width: 80%;
height: 35%;
margin: 0 auto;
background-color: #FFF;
border-radius: 15px;
overflow-y:scroll;
}
</style>
</head>
<body>
<audio src='include/小星星.mp3' autoplay="autoplay" loop="true" id=emb></audio>
<div class="pages">
<div class="page page1">
<div id=btnMusic alt="停止音乐" class="rotate" onclick=changeMusic()></div>
<!-- <a onclick=changeMusic()><img src="<#PATH>音乐.png" id=btnMusic alt="停止音乐" class="btnMusic" ></a> -->
<div style="margin-top:20%;margin-left:8%;width:60%;height:55%;background:url(<#PATH>yuncai.png);background-repeat: no-repeat;background-size: 100% 100%;">
<table style=";width:100%;height:95%;text-align:center;font-size:24px;color:#58B8FE;">
<tr>
<td>
<div onclick="" style="padding-top:5%;">学园简介</div>
</td>
</tr>
<tr>
<td>
<div onclick="">校园风采</div>
</td>
</tr>
<tr>
<td>
<div onclick="">教师风采</div>
</td>
</tr>
<tr>
<td>
<div onclick="">招生信息</div>
</td>
</tr>
</table>
</div>
</div>
<div class="page page2">
<div class=top>
<h2 style="padding-top:50px;">学园简介</h2>
</div>
<div class=center>
<table width="90%">
<tr>
<td id=park colspan=2></td>
</tr>
<tr>
<td id=about colspan=2></td>
</tr>
<tr>
<td colspan=2>
<img style="width:100%;" class=s_picture />
</td>
</tr>
<tr>
<td>地址:</td>
<td id=address></td>
</tr>
<tr>
<td>联系人:</td>
<td class=contacts></td>
</tr>
<tr>
<td>联系电话:</td>
<td class=phone></td>
</tr>
</table>
</div>
</div>
<div class="page page3">
<div class=top>
<h2 style="padding-top:50px;">校园风采</h2>
</div>
<div class=center>
<table width="90%">
<tr>
<td>
<h4>办学宗旨</h4>
</td>
</tr>
<tr>
<td id=purpose></td>
</tr>
<tr>
<td>
<h4>办学目标</h4>
</td>
</tr>
<tr>
<td id=target></td>
</tr>
<tr>
<td>
<img style="width:100%;" class=s_picture />
</td>
</tr>
</table>
</div>
</div>
<div class="page page4">
<div class=top>
<h2 style="padding-top:50px;">教师风采</h2>
</div>
<div class=center>
<img style="width:100%;" class=s_picture />
</div>
</div>
<div class="page page5">
<div class=top>
<h2 style="padding-top:50px;">招生信息</h2>
</div>
<div class=center>
<table>
<tr>
<td id=slogan colspan=2></td>
</tr>
<tr>
<td>招生对象:</td>
<td id=object></td>
</tr>
<tr>
<td>报名时间:</td>
<td id=time></td>
</tr>
<tr>
<td>招生班级:</td>
<td id=enrolment_class></td>
</tr>
<tr>
<td>办学承诺:</td>
<td id=promise></td>
</tr>
<tr>
<td>报名费用:</td>
<td id=charges></td>
</tr>
<tr>
<td>联系人:</td>
<td class=contacts></td>
</tr>
<tr>
<td>联系电话:</td>
<td class=phone></td>
</tr>
<tr>
<td colspan=2>
<img style="height:100%;" id=pictures />
</td>
</tr>
</table>
</div>
</div>
<div class="page page5">
<div class=top>
<h2 style="padding-top:50px;">报名信息</h2>
</div>
<div class=center>
<form method=post name=form onsubmit="try{return sbmChk();}catch(e){alert(e.description);return false;}" ajaxdone="if($.ajax.callback()){alert('报名成功!');}">
<table>
<tr>
<td>姓名:</td>
<td>
<input name=name>
</td>
</tr>
<tr>
<td>年龄:</td>
<td>
<input name=name>
</td>
</tr>
<tr>
<td>监护人:</td>
<td>
<input name=guardian placeholder="填一个监护人即可">
</td>
</tr>
<tr>
<td>地址:</td>
<td>
<input name=address>
</td>
</tr>
<tr>
<td>联系电话:</td>
<td>
<input name=phone placeholder="填一个手机号即可">
</td>
</tr>
<tr>
<td colspan=2>
<input type=submit value=立即报名>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
<div class=xiangxiatishi>向下提示</div>
</body>
</html>
e.nativeEvent.stopImmediatePropagation();方法是防止对事件流中当前节点中和所有后续节点中的事件侦听器进行处理。此方法会立即生效,并且会影响当前节点中的事件侦听器。而这里只需要对当前事件侦听器进行处理,所以这里不需要,注释掉即可,还有绑定需要滚动的那个div的对象,绑定个touchmove事件中e.stopPropagation()防止冒泡即可。