我寫了一個頁面上下滑動翻頁，當我手指放到中間有內容的那個div范圍內時，禁止了touchmove事件，用的是{
//阻止默認事件發(fā)生
e.preventDefault()
//阻止冒泡事件發(fā)生
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范圍之類執(zhí)行這個方法*/
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("請輸入監(jiān)護人");
_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() //初始化
}
/*動態(tài)設定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
}
}
/* 滑動觸發(fā)事件*/
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){
//阻止默認事件發(fā)生
e.preventDefault()
//阻止冒泡事件發(fā)生
e.stopPropagation()
e.nativeEvent.stopImmediatePropagation();
odiv.addEventListener('touchmove',function(e){e.returnValue = true;}, false);
}else if(this.pageX===0&&this.pageY===0){
//阻止默認事件發(fā)生
e.preventDefault()
//阻止冒泡事件發(fā)生
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) {
//阻止默認事件發(fā)生
e.preventDefault()
//阻止冒泡事件發(fā)生
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) {
//阻止默認事件發(fā)生
e.preventDefault()
//阻止冒泡事件發(fā)生
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;
}
}
}
}
/* 滑動結束觸發(fā)事件*/
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>監(jiān)護人：</td>
<td>
<input name=guardian placeholder="填一個監(jiān)護人即可">
</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();方法是防止對事件流中當前節(jié)點中和所有后續(xù)節(jié)點中的事件偵聽器進行處理。此方法會立即生效，并且會影響當前節(jié)點中的事件偵聽器。而這里只需要對當前事件偵聽器進行處理，所以這里不需要，注釋掉即可，還有綁定需要滾動的那個div的對象，綁定個touchmove事件中e.stopPropagation()防止冒泡即可。
北大青鳥APTECH成立于1999年。依托北京大學優(yōu)質雄厚的教育資源和背景，秉承“教育改變生活”的發(fā)展理念，致力于培養(yǎng)中國IT技能型緊缺人才，是大數據專業(yè)的國家
北大青鳥中博軟件學院創(chuàng)立于2003年，作為華東區(qū)著名互聯網學院和江蘇省首批服務外包人才培訓基地，中博成功培育了近30000名軟件工程師走向高薪崗位，合作企業(yè)超4
中公教育集團創(chuàng)建于1999年，經過二十年潛心發(fā)展，已由一家北大畢業(yè)生自主創(chuàng)業(yè)的信息技術與教育服務機構，發(fā)展為教育服務業(yè)的綜合性企業(yè)集團，成為集合面授教學培訓、網
達內教育集團成立于2002年，是一家由留學海歸創(chuàng)辦的高端職業(yè)教育培訓機構，是中國一站式人才培養(yǎng)平臺、一站式人才輸送平臺。2014年4月3日在美國成功上市，融資1
曾工作于聯想擔任系統(tǒng)開發(fā)工程師，曾在博彥科技股份有限公司擔任項目經理從事移動互聯網管理及研發(fā)工作，曾創(chuàng)辦藍懿科技有限責任公司從事總經理職務負責iOS教學及管理工作。
浪潮集團項目經理。精通Java與.NET 技術， 熟練的跨平臺面向對象開發(fā)經驗，技術功底深厚。 授課風格 授課風格清新自然、條理清晰、主次分明、重點難點突出、引人入勝。
精通HTML5和CSS3；Javascript及主流js庫，具有快速界面開發(fā)的能力，對瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網頁制作和網頁游戲開發(fā)。
具有10 年的Java 企業(yè)應用開發(fā)經驗。曾經歷任德國Software AG 技術顧問，美國Dachieve 系統(tǒng)架構師，美國AngelEngineers Inc. 系統(tǒng)架構師。
掃碼關注鍍金池微信號
手機訂課，優(yōu)惠多多