You are here
长按鼠标事件js
<!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>鼠标长按</title>
</head>
<body>
<input type="button" value="鼠标长按" class="lognPress" />
长按时间：<span class="time">0</span> 秒
<script type="text/javascript" src="http://www.chenfahui.cn/ziliao/js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
$(".lognPress").mousedown(function(){
var i = 0;
var _this = $(this);
timer = setInterval(function(){
i+=10;
if(i >= 1000){
i = 0;
lognPress();
}
},10)
}).mouseup(function(){clearTimeout(timer);});
})
var time = 0;
function lognPress(){
time++;
$(".time").html(time);
}
</script>
</html>
来自 http://www.chenfahui.cn/post/63.html
//下面是自己亲自做的 好理解
$("body").mousedown(function(event){
var i = 0;
setM = setInterval(function() {
downflag = true;
i += 10;
if (i >= 500) {
clearInterval(setM);
mouseD(event);
}
}, 10)}).mouseup(function(){ if(downflag){
downflag=false;clearInterval(setM);}}
); //这里 最重要处就是未达到500毫秒时 就清除这个循环
今天用到了“长按鼠标左键”这个事件，这个在网页上用得比较少，而在WebApp上用得稍多点，下面用jQuery实现这个功能：
来自 http://www.w3clog.com/430.html
[jQuery]鼠标按住不放触发事件
(2011-10-27 16:33:06)
转载▼前提：
在JavaScript(JQuery)中没有,mouseup,mousedown,并没有mousedownforamoment,要如何处理呢？
思路分析:
1,按住不放,就是按下,并没有立刻弹起.
2,[假设按下1s,有效]在mousedown方法下,我们编写处理代码,但是要让他在1s后运行.对，setTimeout.
3,这是还有一个问题,点击也会触发.这时我们需要在mouseup方法处理.当鼠标弹起时,我们判断此时setTimeout是否被运行,如果被运行,那说明mousedown超过一分钟,就不做任何处理.否则,说明没有按住鼠标一定时间[超过1s],则终止mousedown的方法,既是终止setTimeout.故,clearTimeout.
附上完整版HTML代码:
[code=html]
<!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>
</head>
<body>
</body>
</html>
[/code]
来自 http://blog.sina.com.cn/s/blog_4a17426a0100yxm6.html
下面的代码 没看懂
/*
* ClassM
* Copyright (c) 2013 Class http://gaoge.name
* E-Mail:g@gaoge.name
* Date: 2013-08
*/
(function($){
//ClassM
$.classM = function(options){
var defaults = {
content:"<div class='classM'><a href='http://www.lanrentuku.com/' target='_blank' class='M_1'></a><a href='http://www.maitianquan.com/' target='_blank' class='M_2'></a><a href='javascript:;' class='M_3'></a><a href='http://www.zheye.cc/' target='_blank' class='M_4'></a></div>",//Content
width:388,//this Tip Width
height:93,//this Tip Height
background:"images/bg.png",//this Tip Background
time:500,//show Time
animateTime:200//animate
}
var options = $.extend(defaults, options);
$(document).each(function(){
$("body").mousedown(function(e){
setM = setTimeout(mouseD,options.time);
winW = $(window).width();
winH = $(document).height();
winX = e.originalEvent.x || e.originalEvent.layerX || 0;
winY = e.originalEvent.y || e.originalEvent.layerY || 0;
if ( winW-winX < options.width ) { winX = winX-options.width }
winScroll = $(document).scrollTop()
winY = winY+winScroll;
})
$("body").mouseup(function(){
clearTimeout(setM)
})
$(document).scroll(function(){
removeClassM()
})
})
mouseD = function mouseD(){
$("body").append("<div class='classMBg' style='position:absolute;top:0;left:0;background:#fff;width:100%;height:"+winH+"px;z-index:9999;'></div>");
$(".classMBg")
.css("opacity","0")
.click(function(){removeClassM()});
$(".classMBox").remove();
$("body").append(
" <div class='classMBox' style='position:absolute;top:"+winY+"px;left:"+winX+"px;z-index:99999;display:none;width:0;text-align:center'>"
+ "<div style='width:"+options.width+"px;height:"+options.height+"px;background:url("+options.background+");'>"
+ options.content
+ "</div></div>");
$(".classMBox a").focus(function(){ $(this).blur() })
$(".classMBox a").hover(function(){ $(this).fadeTo("slow",0.5) },function(){ $(this).fadeTo("slow",1) })
$(".classMBox").show().animate({width:options.width+"px"},options.animateTime)
$(document).keydown(function(event){
if ( event.keyCode == 27 ) { removeClassM() }
})
}
function removeClassM(){
$(".classMBox").animate({width:"0"},options.animateTime,function(){ $(".classMBg,.classMBox").remove() })
}
}
//
})(jQuery);