html 封装调用,封装tap及调用.html

Document

.mydiv{

width: 100px;

height: 100px;

background: red;

}

.mydiv2{

width: 100px;

height: 100px;

background: green;

}

.myspan{

width: 100px;

height: 100px;

display: block;

background: yellow;

}

1

2

3

var mydiv = document.querySelector(".mydiv");

var myspan = document.querySelector(".myspan");

console.log(mydiv.__proto__)//HTMLDivElement这个原型是div的原型，不能共用其他元素标签。

console.log(mydiv.__proto__.__proto__)//HTMLElement，所有元素标签共用原型，把属性和方法挂载到这个原型上，所有的dom都可以调用

HTMLElement.prototype.ontap = function(callback){

var oldtime,newtime,startX,endX;

this.addEventListener("touchstart",function(e){

if(e.targetTouches.length>1){

return

}

startX = e.targetTouches[0].clientX;

oldtime = Date.now();

})

this.addEventListener("touchend",function(e){

newtime = Date.now();

var chatime = newtime-oldtime;

endX = e.changedTouches[0].clientX;

if(chatime>100){

return

}

var chaX = Math.abs(endX-startX);

if(chaX>20){

return

}

console.log('封装的移动端ontap事件触发了');

callback()

})

}

myspan.ontap(()=>{

console.log(1)

})

mydiv.ontap(()=>{

console.log(2)

})

一键复制

编辑

Web IDE

原始数据

按行查看

历史