js 实现长按事件1
JavaScript实现长按事件
这方式太粗暴 , 肯定还有简单的方式请朋友们告知
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test长按</title>
<style>
textArea{}
</style>
</head>
<body>
<textArea id=a rows=200 cols=20 ></textArea>
<textArea id=b rows=200 cols=20 ></textArea>
</body>
<script>
var a = document.getElementById("a");
var b = document.getElementById("b");
// 给a添加长按事件和点击事件
addLongDown(a , function(e){
this.value += "长按\n";
});
a.addEventListener('click' , function(){
this.value += "点击\n";
})
// 给b添加长按事件和点击事件
addLongDown(b , function(e){
this.value += "长按\n";
});
b.addEventListener('click' , function(){
this.value += "点击\n";
})
function addLongDown(ele , fn){
var time = 0; // 用于计算按下时间
var flag = false; // 判断按下时间否是大于500毫秒
ele.addEventListener('mousedown' , function(e){ // 按下计时
time = new Date().getTime();
});
ele.addEventListener('mouseup' , function(e){ // 抬起计算
flag = (new Date().getTime() - time) > 500;
if(flag){
fn.call(this , e); // 按下大于500毫秒执行回调函数
}
});
ele.addEventListener('click' , function(e){ // 在同一个target上执行按下和抬起会触发点击事件,屏蔽掉已经绑定的点击事件
if(flag){
flag = false; // 重新计算
e.stopImmediatePropagation(); // 屏蔽this的所有点击事件
}
});
}
</script>
</html>
点击多行文本出现点击 , 长按多行文本出现长按