js中写的超级链接在web模式时可以跳转,但切换到手机端偶尔能点击到a标签
木兮沐阳 2020-11-30 06:36:26 //获取章节信息
function chapter_info() {
var couId = $("body").attr("couId");
// console.log(cou);
$.get("/home/getChapterinfo", {couid: couId}, function (data) {
var d = eval("(" + data + ")");
// console.log(d);
isStudy = d.isStudy;
//构造树形数据结构
if (d.chapter.length > 1) {
for (var i =0;i< d.chapter.length; i++) {
var olisnode = d.chapter[i].olIsnode,olQuescount = d.chapter[i].olQuescount,olisfinish=d.chapter[i].olIsfinish;
if (olisnode) {
if(isFirstNode) {
isFirstNode = false;
} else {
listData += ']\n},'
}
listData += "{\n\"name\": \"" + d.chapter[i].olName + "\",\n";
listData += "\"olQuescount\":\"" +olQuescount+ "\",\n" + "\"olisfinish\":\"" +olisfinish+ "\",\n";
listData += "\"url\": \"" + "QuesExercises.th?olid=" + d.chapter[i].olId + "&couid=" + couId + "\",\n";
listData += "\"lists\":["
} else {
listData += "{\n\"name\": \"" + d.chapter[i].olName + "\",\n";
listData += "\"olQuescount\":\"" +olQuescount+ "\",\n" + "\"olisfinish\":\"" +olisfinish+ "\",\n";
listData += "\"url\": \"" + "QuesExercises.th?olid="+d.chapter[i].olId+"&couid="+couId+"\",\n},\n";
}
}
listData += "]}]"
}else{}
createTree();
})
}
//创建章节树列表
function createList(listData) {
const list = document.createElement('ul');
for(const data of listData) {
const li = document.createElement('li');
const a = document.createElement('a');
const s = document.createElement('span');
if(data.olisfinish == "false")
{
a.innerText = data.name;
// a.setAttribute('type', 'nofinish');
// a.setAttribute('class', 'noselect');
s.setAttribute('class', 'mui-badge');
s.innerText = '未完结';
li.appendChild(s);
}else if(isStudy == "true" || couIsfree || couIslimitfree || couIstry) {
a.innerText = data.name;
a.setAttribute('href', data.url);
const s1 = document.createElement('span');
s1.setAttribute('class', 'mui-badge count');
li.appendChild(s1);
s.innerText = 0;
s.setAttribute('class', 'ansnum');
s1.appendChild(s);
const s2 = document.createElement('span');
s2.innerText ='/' + data.olQuescount;
s2.setAttribute('class', 'num');
s1.appendChild(s2);
}
else {
//a.setAttribute('type', "buy");
data.url = "CourseBuy.th?couid=" + $().getPara("couid");
a.setAttribute('href', data.url);
a.innerText = data.name;
s.setAttribute('class', 'mui-badge');
s.innerText = '购买';
li.appendChild(s);
}
li.appendChild(a);
let hasChild=false;
if(data.lists) {
hasChild=true;
li.appendChild(createList(data.lists));
}
li.setAttribute('class', 'chapter' + (!hasChild ? '-cell' : ''));
li.setAttribute('count',data.olQuescount);
list.appendChild(li);
}
return list;
}
//章节树的点击事件
function createTree(){
document.getElementById("Chapters").appendChild(createList(eval(listData)));
//querySelectorAll会查找元素内部匹配条件的所有元素,而querySelector只会查找元素内部第一个匹配条件的元素
document.querySelectorAll('.chapter', '::before').forEach(node => {
node.onclick = (event)=> {
//event.target指的是触发事件的元素源,localName用来获取触发事件元素的标签
console.log(event.target.localName);
switch(event.target.localName) {
case "ul":
const ulnode = node.querySelector('ul');
// console.log(ulnode);
//setAttribute用来设置元素的属性,而display是style对象内的属性
ulnode.style.display = (ulnode.style.display == "" ? "none" : "");
break;
case "li":
const ul = node.querySelector('ul');
// console.log(ul);
//setAttribute用来设置元素的属性,而display是style对象内的属性
ul.style.display = (ul.style.display == "" ? "none" : "");
break;
case "a":
//preventDefault方法用来阻止元素发生默认的行为(点击a标签默认会转向锚点链接)
// event.preventDefault();
// console.log(event.view.location.href);
//return;
break;
}
//由于事件会逐层向上传递(事件冒泡),因此必须调用该方法阻止事件继续传播
event.stopPropagation();
}
});
}